C# 如何显示具有背景和前景两个类别的标签

设计形象是

这些代码是我写的，但是背景比我预期的要大，我希望当我点击一个类别时，数据会发生变化，选中的标签会高亮显示

我的密码是

    <DataTemplate x:Key="varietyListViewTemplate" x:DataType="local:Category" >
        <TextBlock Text="{x:Bind title}" FontSize="12" HorizontalAlignment="Center" TextWrapping="Wrap"  VerticalAlignment="Center"  />
    </DataTemplate>
    <Style x:Key="varietyListViewStyle" TargetType="ListView">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

    </Style>
    <Style x:Key="varietyListViewItemStyle" TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter 
                        Foreground="#979797"
                        Background="#ffffff"
                        SelectedForeground="#ffffff"
                        SelectedBackground="#fd8c00" 
                        PressedBackground="#fd8c00"
                        SelectedPressedBackground="#fd8c00"
                        SelectedPointerOverBackground="#fd8c00"
                        Margin="2"
                        />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--  PointerOverBackground="#fd8c00"
          SelectedForeground="#ffffff"




          PointerOverForeground="#ffffff" -->
</Page.Resources>
<Grid>
    <Grid Background="#FFFFFF">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <ListView x:Name="varietyListView" Grid.Row="0" 
              ItemsSource="{x:Bind Path=Categorys}" ItemTemplate="{StaticResource varietyListViewTemplate}"
              IsItemClickEnabled="True" SelectionMode="Single" Style="{StaticResource varietyListViewStyle}" ItemContainerStyle="{StaticResource varietyListViewItemStyle}"
              ItemClick="varietyListView_ItemClick" >

        </ListView>

        <ListView x:Name="varietyListView2" Grid.Row="0" 
              ItemsSource="{x:Bind Path=Categorys}" ItemTemplate="{StaticResource varietyListViewTemplate}"
              IsItemClickEnabled="True" SelectionMode="Single" Style="{StaticResource varietyListViewStyle}" ItemContainerStyle="{StaticResource varietyListViewItemStyle}"
              ItemClick="varietyListView2_ItemClick" Margin="0,0,0,50">

        </ListView>
        <Frame x:Name="varietyFrame" Grid.Row="1"/>
    </Grid>


    <Grid Name="listImage">

    </Grid>
</Grid>

---

我建议您将网格嵌套到ListviewItem，然后您可以更改listitems的背景或网格的背景，当然，您还可以调整此网格的大小

例如：

<ListView x:Name="varietyListView" Grid.Row="0" >
    <ListView.ItemTemplate >
        <DataTemplate>
          <Grid>
            <TextBlock Text="{Binding ...}"/>
          </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这是因为ListViewItem的大小大于文本的实际大小。通过检查ListViewItem的默认模板，您会发现MinWidth和MinHeight属性指定如下

<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>

<x:Double x:Key="ListViewItemMinWidth">88</x:Double>
<x:Double x:Key="ListViewItemMinHeight">44</x:Double>

<Style x:Key="varietyListViewItemStyle" TargetType="ListViewItem">
    <Setter Property="MinWidth" Value="0" />
    <Setter Property="MinHeight" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter 
                    Foreground="#979797"
                    Background="#ffffff"
                    SelectedForeground="#ffffff"
                    SelectedBackground="#fd8c00" 
                    PressedBackground="#fd8c00"
                    SelectedPressedBackground="#fd8c00"
                    SelectedPointerOverBackground="#fd8c00"
                    Margin="20"
                    />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>