How to set a WPF ListView Selected Item color?

前端 未结 2 1276
别那么骄傲
别那么骄傲 2020-12-15 22:55

I am trying to recreate the Mail UI from Windows 8 in a WPF application running on Windows 7. Here\'s what I want to achieve:

相关标签:
2条回答
  • 2020-12-15 23:35

    Just adding to "TrueEddie" point.

    The other option would be "ItemContainerStyle" in ListView.

      <ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
    
    
                      BorderThickness="0" 
                         ItemContainerStyle="{StaticResource ListViewSmartNotes}"
                      SelectedItem="{Binding SelectedSmartNotes, Mode=TwoWay}"
                      ItemsSource="{Binding LstSmartNotes, Mode=TwoWay}" 
                      ItemTemplate="{DynamicResource ListViewItemOptionStyle}">
    
    
            </ListView>
    

    ListViewItemOptionStyle defined in Style.xml

    <Style x:Key="ListViewItemOptionStyle" TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <!-- Trun off default selection-->
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border x:Name="Bd" BorderBrush="Gray" BorderThickness="0,1,0,1" 
                                Background="{TemplateBinding Background}" 
                                Padding="{TemplateBinding Padding}" 
                                SnapsToDevicePixels="true">
                            <ContentPresenter 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground"
                                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
            </Setter.Value>
            </Setter>
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsSelected" Value="True" />
                </MultiTrigger.Conditions>
                <MultiTrigger.Setters>
                    <Setter Property="Background" Value="Green" />
                    <Setter Property="BorderBrush" Value="Green" />
                    <Setter Property="Foreground" Value="White"/>
                </MultiTrigger.Setters>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
    

    Fore more details

    https://sites.google.com/site/greateindiaclub/mobil-apps/windows8/wpfimportantbindings

    0 讨论(0)
  • 2020-12-15 23:47

    I did something similar to this recently:

    <ListView.Resources>                
        <ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
            <Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="#FF92C6F9" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="{Binding Value}" Cursor="Hand" MouseUp="Border_MouseUp_1">                        
                <TextBlock Text="{Binding Name}" Margin="5" />
            </Border>
        </ControlTemplate>
        <Style TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="WhiteSmoke" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="{Binding Value}" Cursor="Hand" MouseUp="Border_MouseUp_1" >                                    
                            <TextBlock Text="{Binding Name}" Margin="5" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="true" />
                        <Condition Property="Selector.IsSelectionActive" Value="true" />
                    </MultiTrigger.Conditions>                            
                    <Setter Property="Template" Value="{StaticResource SelectedTemplate}" />                            
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </ListView.Resources>
    

    I believe removing:

    <Condition Property="Selector.IsSelectionActive" Value="true" />
    

    will allow you to keep the background color after focus is lost.

    EDIT:

    In response to your question below:

    You can bind the tag property of the TextBlock to the command parameter, and then execute the command on the MouseUp event of the TextBlock:

    <TextBlock x:Name="MyTextBlock" Text="Click Me!" Tag="{Binding MyCommandParameter}" MouseUp="MyTextBlock_MouseUp" />
    

    And in the code behind:

        private void MyTextBlock_MouseUp(object sender, MouseButtonEventArgs e)
        {
            TextBlock tb = sender as TextBlock;
    
            if (tb != null && tb.Tag != null)
            {
                ViewModel.MyCommand.Execute(tb.Tag);
            }            
        }
    
    0 讨论(0)
提交回复
热议问题