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:
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
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);
}
}