ListBox选择项目背景颜色

时间:2015-05-11 22:24:12

标签: xaml windows-store-apps

尝试从列表框中制作标签控件。如果listboxitems只是文本,那么很容易看到选择了哪个选项卡,但只要我添加一个图像/路径作为listboxitem的内容,它就不再显示它被点击时被选中。下面唯一显示选择何时的项目是" Hello World"项目。我只想让标签的背景在选中时改变颜色。

<ListBox>
 <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem>
            <Canvas Width="53.3333" Height="53.3333">
                <Path Width="4.22434" Height="4.224" Stretch="Fill" Fill="#FF000000" Data="..."/>               
            </Canvas>
        </ListBoxItem>
        <ListBoxItem>
            <ListBoxItem.Content>
                <Canvas Width="46.6667" Height="45.3333">
                    <Path Width="46.3232" Height="43.9357" 
                          Canvas.Left="0.51729" 
                          Canvas.Top="1.06295" 
                          Stretch="Fill" 
                          Fill="#FF000000" 
                          Data="..."
                </Canvas>
            </ListBoxItem.Content>
        </ListBoxItem>
        <ListBoxItem Content="Hello World">
        </ListBoxItem>
    </ListBox>

1 个答案:

答案 0 :(得分:2)

我刚刚使用ListView为我的一个应用做了这个。它应该与ListBox类似,但你可能想要使用ListView,因为它们是相似的,我知道它的工作原理。您需要修改样式以设置SelectedBackground和SelectedPointerOverBackground颜色。我将它们设置为蓝色,如下所示。

        <Style x:Key="ListViewItemTabStyle" TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="IsHoldingEnabled" Value="True"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    Padding="{TemplateBinding Padding}"
                    SelectionCheckMarkVisualEnabled="False"
                    CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
                    CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
                    CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                    FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                    PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
                    SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
                    SelectedBackground="Blue"
                    SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
                    SelectedPointerOverBackground="Blue"
                    SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    PointerOverBackgroundMargin="1"
                    ContentMargin="4" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

然后像这样为ListView设置样式:

<ListView ItemContainerStyle="{StaticResource ResourceKey=ListViewItemTabStyle}"  Background="Gray" SelectedIndex="0">
     <ListViewItem Content="Item1"/>
     <ListViewItem Content="Item2"/>
     <ListViewItem Content="Item3"/>
</ListView>