c# - “标签列表”的 WPF 输入法

Question

我正在寻找 WPF 组件（如果存在）以与 StackOverflow.com 在输入问题标签时提供的类似方式输入标签。

是否存在这样的组件？如果没有，最好的方法是什么？我在考虑一个带有特定填充的文本框来反映现有标签的位置，但这似乎需要做很多工作，因为它很可能需要自定义测量/排列实现。

Answer 1

我认为一个简单的模板ItemsControl可以用标签按钮来解决问题ItemsTemplate，水平StackPanel作为ItemsContainer

Answer 2

有我的代码的例子

<ItemsControl ItemsSource="{Binding Cats}">
    <ItemsControl.Resources>
        <ResourceDictionary>
            <Style TargetType="StackPanel" x:Key="hoverStackPanel1">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Opacity" Value="1" />
                        <Setter Property="Background" Value="Red"/>
                    </Trigger> 
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Opacity" Value="0.7" />
                        <Setter Property="Background" Value="{StaticResource SecondaryColorBrush}"/>
                    </Trigger> 
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </ItemsControl.Resources>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Style="{StaticResource hoverStackPanel1}"
                            Margin="0,0,10,5">

                <TextBlock Text="{Binding ., StringFormat=#{0}}" Margin="7,0,10,0" Foreground="White" FontSize="14" />
                <Button Content="X" Width="15" Height="15" BorderThickness="0" Style="{StaticResource RoundCorner}"
                            DataContext="{Binding .}"
                            FontSize="8" Margin="3"
                            Click="ButtonDetailRemove_Click" />

            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

猫在哪里：

ObservableCollection<string> Cats {get;set;}

和应用程序资源 - “删除按钮”样式

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SecondaryColor" >#5eba7d</Color>
        <SolidColorBrush x:Key="SecondaryColorBrush" Color="{StaticResource SecondaryColor}" />

        <!--rounded border-->
        <Style x:Key="RoundCorner" TargetType="{x:Type Button}">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid">
                            <Border x:Name="border" CornerRadius="8" BorderBrush="Black" BorderThickness="2">
                                <Border.Background>
                                    <RadialGradientBrush GradientOrigin="0.496,1.052">
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5" 
                                                    ScaleX="1.5" ScaleY="1.5"/>
                                                <TranslateTransform X="0.02" Y="0.3"/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Offset="1" Color="#00000000"/>
                                        <GradientStop Offset="0.3" Color="#FFFFFFFF"/>
                                    </RadialGradientBrush>
                                </Border.Background>
                                <ContentPresenter HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        TextElement.FontWeight="Bold">
                                </ContentPresenter>
                            </Border>

                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="border">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Color="#00000000" Offset="1"/>
                                            <GradientStop Color="#FF303030" Offset="0.3"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>