Selected Item Background?

问题

I have a ListBox with a buttons DataTemplate. The ListBox view items are in a list of ToggleButtons.

My problem is the with selected item background as shown in picture:

As shown, the problem is in button one. This screenshot was taken when the wpf page is first loaded (before the toggle button is checked). If I then check the togglebutton (button one) the white in the border will disappear

I don't want this white color shown (like two button). I have:

   <ListBox x:Name="lbname" ItemsSource="{Binding myCollection}" Margin="432,110,0,158" Width="214" HorizontalAlignment="Left" Background="{x:Null}" BorderBrush="{x:Null}">
        <ListBox.Resources>
            <Style TargetType="ListBoxItem">
                <Style.Resources>
                    <!-- SelectedItem with focus -->
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                   Color="Transparent" />
                    <!-- SelectedItem without focus -->
                    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
                   Color="Transparent" />
                    <!-- SelectedItem text foreground -->
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
                   Color="Black" />
                </Style.Resources>
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            </Style>
        </ListBox.Resources>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <ToggleButton x:Name="btnname" tyle="{StaticResource ToggleStyle}" FontFamily="tahoma" FontSize="14" Height="55" Width="208" FontWeight="Normal" IsChecked="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" Background="{x:Null}" BorderBrush="{x:Null}" Checked="btnname_Checked" >
                    <Grid>
                        <Image Height="55" Width="205">
                            <Image.Style>
                                <Style>
                                    <Setter Property="Image.Source" Value="/myApplication;component/images/buttons/two.png" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" Value="True">
                                            <Setter Property="Image.Source" Value="/myApplication;component/images/buttons/one.png" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Image.Style>
                        </Image>
                        <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                </ToggleButton>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Any suggestions on how to fix this?

回答1:

You need to add this Style to override the default styling of the ListBoxItem:

<Style x:Key="HiddenDefaultSelectionStyle" TargetType="{x:Type ListBoxItem}">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
    </Style.Resources>
</Style>

You can of course replace these colours with whatever you prefer. You can use it like this:

<ListBox ItemContainerStyle="{StaticResource HiddenDefaultSelectionStyle}" />

Or you can remove the x:Key="HiddenDefaultSelectionStyle" declaration and then it will affect every ListBoxItem in scope.

回答2:

oky, finaly i have solved my issue via using the below style

<Style TargetType="ListBoxItem" x:Key="NoSelectionItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="LayoutRoot" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                    VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <ContentControl x:Name="ContentContainer"
                                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                                    Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" 
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    Margin="{TemplateBinding Padding}" 
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

来源：https://stackoverflow.com/questions/18232757/selected-item-background