Question

我已经应用了evernote标签控件正在工作，但设计不是多行的，因为我添加了标签，它被添加到上一个标签旁边并添加到单行中，但它必须在没有时向下移动页面上有更多空间。这是我想要的截图：
我已关注此链接：http://stackoverflow.com/questions/15167809/how-can-i-create-a-tagging-control-similar-to-evernote-in-wpf但仍无法获取多行标记。请让我知道我哪里出错了。以下是我的xaml：

<!-- EvernoteTagControl default style -->
<Style TargetType="{x:Type local:EvernoteTagControl}">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White" />
        <LinearGradientBrush x:Key="IconBrush" EndPoint="0,1">
            <GradientStop Color="#5890f0" Offset="0" />
            <GradientStop Color="#0351d7" Offset="1" />
        </LinearGradientBrush>
    </Style.Resources>       
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Margin" Value="15 25 15 15" />
    <Setter Property="MinHeight" Value="25" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:EvernoteTagControl}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <!--<ColumnDefinition Width="Auto" />-->
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <!--<Path Grid.Column="0" Margin="2" Fill="{StaticResource IconBrush}" Height="19" Stretch="Uniform" Data="M 50.535714,0.44196425 0.00446427,34.754464 l 0,106.906246 100.71874573,0 0,-107.124996 L 50.535714,0.44196425 z m 0.1875,21.21874975 c 6.311826,0 11.40625,5.094424 11.40625,11.40625 0,6.311826 -5.094424,11.4375 -11.40625,11.4375 -6.311826,0 -11.4375,-5.125674 -11.4375,-11.4375 0,-6.311826 5.125674,-11.40625 11.4375,-11.40625 z" />-->
                    <ItemsPresenter Grid.Column="0" Margin="2"  />
                    <Button Margin="5,0,0,0" Grid.Column="1" Content="Click to add..." x:Name="PART_CreateTagButton">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <ContentPresenter TextElement.Foreground="#FF555555" VerticalAlignment="Center" />
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Cursor" Value="Hand" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEditing" Value="True">
                        <Setter TargetName="PART_CreateTagButton" Property="Visibility" Value="Collapsed" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemsPanel" >
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- EvernoteTagItem default style -->
<Style TargetType="{x:Type local:EvernoteTagItem}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="MinWidth" Value="50" />
    <Setter Property="Margin" Value="0,0,2,0" />
    <Setter Property="Padding" Value="5,2,0,2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
                <Button x:Name="PART_TagButton" Content="{TemplateBinding Text}" Foreground="#ffffff" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Border Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" BorderBrush="#00698C" BorderThickness="1" CornerRadius="2" Background="#00698C" >
                                <Grid >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,0,2" />
                                    <Button x:Name="PART_DeleteTagButton" Grid.Column="1"  Margin="3,0" VerticalAlignment="Center" HorizontalAlignment="Right"   >
                                        <Button.Template>
                                            <ControlTemplate>
                                                <Grid Height="10" Width="10" Background="#00698C" >
                                                    <Path Stretch="Uniform" ClipToBounds="True"  Stroke="{StaticResource HighlightBrush}" StrokeThickness="1" Data="M 85.364473,6.9977109 6.0640998,86.29808 6.5333398,85.76586 M 6.9926698,7.4977169 86.293043,86.79809 85.760823,86.32885"  />
                                                </Grid>
                                            </ControlTemplate>
                                        </Button.Template>
                                    </Button>
                                </Grid>
                            </Border>
                            <!--<ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Foreground" Value="#ffffff" />
                                    <Setter TargetName="PART_DeleteTagButton" Property="Visibility" Value="Visible" />
                                </Trigger>
                            </ControlTemplate.Triggers>-->
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsEditing" Value="True">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
                        <tkInput:AutoCompleteBox x:Name="PART_InputBox"
                                                         Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" 
                                                         ItemsSource="{Binding AllTags, RelativeSource={RelativeSource AncestorType={x:Type local:EvernoteTagControl}}}"
                                                         IsTextCompletionEnabled="True"
                                                         />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

我得到这些标签：

Answer 1

目前，您使用StackPanel作为ItemsPanel，但堆栈面板永远不会将其项目包装在多个维度中。因此，您应该尝试使用WrapPanel或UniformGrid

等面板

对于WrapPanel，您还需要在Width中设置ItemContainerStyle，以确保所有标记项的大小相同（根据您的“我想要的内容） “图片）。

然后您必须决定PART_CreateTagButton按钮的位置。使用多行标记时，ItemsPresenter和PART_CreateTagButton的网格布局可能不再合适。

您可以创建原始标记项源的复合项源和按钮作为最后一项。这样，按钮将始终与标签正确对齐。有关详细信息，请参阅Add extra items when using ItemsSource和How do you bind a CollectionContainer to a collection in a view model?。

进行标签控制的多线设计

1 个答案: