Question

设计图片为

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

我的代码是

    <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>

Answer 1

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

例如：

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

Answer 2

那是因为 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>

要查找默认模板，请检查ListViewItem styles and templates或 generic.xaml (typical in C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic) < / strong>通过搜索“Windows.UI.Xaml.Controls.ListViewItem的默认样式”。

要解决此问题，我们可以尝试通过设置ListViewItem的{{1}}和{ListViewItem来使MinWidth与实际文本的大小相同{1}}为“0”并使用MinHeight来控制它们之间的间距。因此，应用以下代码应该得到你想要的：

Margin

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

2 个答案: