I have the Output something like Windows 8 Start Menu.
Here is screen-shot of my Output:
I have successfully got that output by getting help from this question.
XAML for achieving the below output:
<ItemsControl ItemsSource="{Binding MenuCategories}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" FontSize="30" />
<ListBox Grid.Row="1" x:Name="lst" ItemsSource="{Binding Design_Master_TileItem}" BorderThickness="0"
SelectedItem="{Binding DataContext.SelectedTile, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
helpers:SingleSelectionGroup.SelectionGroup="Group">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Vertical" MaxHeight="{Binding ElementName=lst, Path=ActualHeight}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Width" Value="250" />
<Setter Property="Height" Value="125" />
<Setter Property="Margin" Value="2.5" />
<Setter Property="Padding" Value="2.5" />
<Setter Property="Background" Value="{Binding Background, Converter={StaticResource stringToBrushConverter}}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="{Binding Background, Converter ={StaticResource stringToBrushConverter}}" />
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="125" Width="250">
<Path Data="{Binding ImageData}" VerticalAlignment="Center"
Stretch="Uniform" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
Width="68" Height="68" Margin="10" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
<TextBlock Text="{Binding Title, Converter={StaticResource spaceToNewLineConverter}}" VerticalAlignment="Top"
Margin="40,10,10,10" FontSize="24" Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
So, from the above code you might have understood that Group and Ledger are two items of listbox1. and other four are the items of listbox2.
Requirements:
Suppose, ItemA1 is selected in listboxA.
Case1: New Behavior
If ListBoxA does not have any items on the right side of Item1, then when I press right arrow key the focus should move to the ItemB1 of listboxB. Likewise if ItemA2 of listboxA is selected then the focus should move to the ItemB2 of ListBoxB.
Case2: Default Behavior
If ListBoxA has some items on the right hand side of ItemA1, then that item should be selected by pressing right arrow key. I have this behavior by default but I don't want to disturb it. I mean while implementing Case1 I don't want to loose the default behavior.
Your Current xaml code working fine here.. Please refer this link for KeyBoardNavigation Keyboardnavigation
You need to add only KeyboardNavigation.DirectionalNavigation="Continue" KeyboardNavigation.TabNavigation="Continue" to listbox and it works as expected.
<ItemsControl KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" Focusable="False" >
...
<ListBox Grid.Row="1" x:Name="lst" KeyboardNavigation.DirectionalNavigation="Continue" KeyboardNavigation.TabNavigation="Continue" BorderThickness="0"/>
..
</ItemsControl>
Moving the focus from one ListBox to another within various items requires difficult logic. Instead you can use a single ListBox with grouping based on the Header. The GroupStyle Panel can be changed to stackpanel with horizontal orientation to achieve your UI. I tried like that and the focus works as expected,
<ListBox ItemsSource="{Binding Source={StaticResource source}}" DisplayMemberPath="Name">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>
Related
I have a data grid which has a DataGridTemplateColumn that looks something like this:
<DataGridTemplateColumn>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding DataContext.SomeStrings, Source={StaticResource proxy}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="30" Margin="0">
<TextBlock Text="{Binding}" TextAlignment="Left">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" CenterX="0.5" CenterY="0.5"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0" />
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="30">
<Button>
<TextBlock Text="{Binding}"/>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
The idea is to have a dynamic set of "columns" in a datagrid but having a single column that is, itself, a StackPanel and by having the same thing in the CellTemplate I can get everything to line up nicely. The idea came for here: http://blogs.msmvps.com/deborahk/populating-a-datagrid-with-dynamic-columns-in-a-silverlight-application-using-mvvm/
It works well enough for what I'm doing. However, I want to wrap the TextBlock in the HeaderTemplate in a Button. So something like this:
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding DataContext.SomeStrings, Source={StaticResource proxy}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="30" Margin="0">
<Button>
<TextBlock Text="{Binding}" TextAlignment="Left">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" CenterX="0.5" CenterY="0.5"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
The problem is that this introduces some extra spacing and I can't for the life of me figure out where it's coming from:
Notice that without the buttons, it lines up great, but with the buttons it's shifted a few pixels to the right. Where is it picking up this extra spacing? And how can I make it not do that? I could just get a negative left margin on my StackPanel, but that feels like a horrible hack.
As you can see, the same problem doesn't happen in the CellTemplate for whatever reason.
Complete Example
MainWindow.xaml:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" DataContext="{Binding RelativeSource={RelativeSource self}}">
<Window.Resources>
<FrameworkElement x:Key="proxy" DataContext="{Binding}"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl Visibility="Collapsed"
Content="{StaticResource proxy}"/>
<DataGrid ItemsSource="{Binding SomeData}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding DataContext.SomeStrings, Source={StaticResource proxy}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="30" Margin="0" Background="Pink">
<TextBlock Text="{Binding}" TextAlignment="Left" VerticalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" CenterX="0.5" CenterY="0.5"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0" />
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="30">
<Button>
<TextBlock Text="{Binding}"/>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<DataGrid ItemsSource="{Binding SomeData}" AutoGenerateColumns="False" Grid.Row="1">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.HeaderTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding DataContext.SomeStrings, Source={StaticResource proxy}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="30" Margin="0">
<Button BorderThickness="0">
<TextBlock Text="{Binding}" TextAlignment="Left">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" CenterX="0.5" CenterY="0.5"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.HeaderTemplate>
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0" />
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="30">
<Button>
<TextBlock Text="{Binding}"/>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public string[] SomeStrings { get; set; } = new[] { "Foo", "Bar" };
public List<string[]> SomeData { get; set; } = new List<string[]>() { new[] { "a", "b" }, new[] { "c", "d" } };
public MainWindow()
{
InitializeComponent();
}
}
Note: I added background color to the example without the buttons and I'm now not convinced that they are lined up accept by total accident. I think because the text labels are aligned to the top (which once rotated becomes the left-hand side), they appear to line up, whereas when you add the button the label gets shifted to the center and don't line up anymore
By Default a Button.HorizontalContentAligment is Center, where as a Textblocks.HorizontalAlignment is Left. So when you are wrapping your TextBlock in a Button it gets centered but your Textblock gets layed out on the left..
All you need to do is set the top TextBoxes Horizontal Alignment to Center, and you will get identical look:
<Border Width="30" Margin="0" Background="Pink">
<TextBlock Text="{Binding}" TextAlignment="Left" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.LayoutTransform>
<RotateTransform Angle="270" CenterX="0.5" CenterY="0.5"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Border>
If you want them to be completely lined up, get rid of the Padding in DataGridColumnHeader (N.B. setting it to 0 causes it to be overriden possibly by some trigger? Haven't got time to investigate at the moment. But if you set it to the following:
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0,1" />
</Style>
You will get the spacing you desire:
I want to select next item on scrolling right or left
<StackPanel >
<StackPanel Width="500">
<ItemsControl ItemsSource="{Binding Devices}" Focusable="False" >
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}" >
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled"
CanContentScroll="True" Template="{DynamicResource ScrollViewerControlTemplate1}"
helpers:ScrollBarVisibilityHelper.IsEnabled="True" >
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Views:DeviceMiniView DataContext="{Binding}" Margin="10,5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Style>
<Style TargetType="{x:Type ItemsControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
Value="0">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<TextBlock Text="No devices" FontSize="24" FontWeight="Bold"
Margin="0,0,0,20" Foreground="#FFF8F5F5" />
<TextBlock Text="Click Menu->Reconnect" FontSize="24"
FontWeight="Bold" Margin="0,0,5,0" Foreground="White" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Items.Count, RelativeSource={RelativeSource Self}}"
Value="1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.Style>
</ItemsControl>
</StackPanel>
I am trying to scroll my item present in scrollViwer, One item once from the list of items, But unfortunately i didn't succeed,
i new with WPF,
I have Xaml:
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}" >
<ScrollViewer
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Disabled"
CanContentScroll="True"
Template="{DynamicResource ScrollViewerControlTemplate1}"
helpers:ScrollBarVisibilityHelper.IsEnabled="True"
>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
Can anybody help me out i have tried to change the style, templet and also tried with collectionview and observable collection in view model.
I would be thankfull.
I am using a ListView with a WrapPanel as its ItemsPanel. I need to change the style of selected items - use a different background color and add a border around the selected items, like Windows 7's Explorer does.
<ListView ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Pink" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just simply design ControlTemplate for Default type and Selected type. Then you can set Selected ControlTemplate when any item in the ListView is selected, otherwise keep Default type.
<Window.Resources>
<ControlTemplate x:Key="DEFAULT">
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Green" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</ControlTemplate>
<ControlTemplate x:Key="SELECTED_TYPE">
<Border BorderBrush="Gray" BorderThickness="1">
<StackPanel Orientation="Vertical" Margin="10">
<Rectangle Width="100" Height="100" Fill="Pink" />
<TextBlock Text="{Binding Caption}" Margin="0,10,0,0" />
</StackPanel>
</Border>
</ControlTemplate>
<Style x:Key="ListItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="White"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Template" Value="{StaticResource SELECTED_TYPE}"/>
<Setter Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Template" Value="{StaticResource DEFAULT}"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ListView ItemsSource="{Binding Items}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource ListItemStyle}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
I have a ListBox with a DataTemplate. I'm trying to change the color of the text/foreground to white for the selected item in the listbox. I have seriously tried like 30 different ways to do it that I've found on google. I just can't get it to work. How can I change the foreground color?
Also, I would like to point out that I would like to not rely on the method that uses the SystemColors because I read that it won't work in .net 4.5 so I don't want it to break when we move our application to 4.5 some day. Here is my listbox xaml:
<ListBox Grid.Row="1" x:Name="Alerts" ItemsSource="{Binding Alerts}" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" AlternationCount="2">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label Content="{Binding Type}" HorizontalAlignment="Left" Padding="1,1,1,0" />
<Label Content=" - " Padding="1,1,1,0"></Label>
<Label Content="{Binding Date}" HorizontalAlignment="Left" Padding="1,1,1,0" />
</StackPanel>
<Label Grid.Row="1" Content="{Binding Message}" HorizontalAlignment="Left" Margin="0" Padding="1,0,1,1" />
</Grid>
<Button Grid.Column="1"
CommandParameter="{Binding .}"
Command="{Binding Path=DataContext.Commands.RemoveAlertCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
Content="X" HorizontalAlignment="Right" Width="Auto" Height="Auto" Foreground="#FFD40000" FontWeight="Bold" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="LightGray"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="Ivory"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
What about this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
In a DataTemplate that uses TextBlocks, the Foreground property would simply be inherited:
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
In your DataTemplate with Label controls Foreground value inheritance does not work (see here why). But you may always bind to the Foreground property of the ListBoxItem like this:
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding}"
Foreground="{Binding Foreground,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType=ListBoxItem}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
Or you may simply replace your Labels with TextBlocks.
I have the following XAML to bind data to a ListBox filled with CheckBoxes:
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=StakeTypes}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}" SelectionChanged="lbStakes_SelectionChanged" SelectionMode="Extended">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Problem is, the style for the ListBox selection is different than if I manually created each ListBox Item:
<ListBox Background="Transparent" Cursor="Hand" Grid.Column="6" Grid.Row="3" Name="lbStakes" SelectionMode="Extended">
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Low" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Medium" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="High" />
</ListBoxItem>
<ListBoxItem IsSelected="True">
<CheckBox IsChecked="True" Foreground="White" Content="Highest" />
</ListBoxItem>
</ListBox>
Here are the images:
I would like it to look like the second image. Any ideas are greatly appreciated.
Update: The following is the style I am trying to apply to the ListBoxItem:
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="3" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource myBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The two styles are different because in your bound ListBox you are using ItemContainerStyle="{StaticResource SelectionListBoxItem}", whereas in your second snippit, the default listbox item style applies. Try removing this style assignment from the bound listbox.
<Window.Resources>
<Style x:Key="SelectionListBoxItem" TargetType="ListBoxItem">
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" BorderBrush="Black" BorderThickness="0.5" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox Background="Transparent" Grid.Column="8" Grid.Row="3" ItemsSource="{Binding Path=IsSelectede}" Foreground="White"
Name="lbStakes" ItemContainerStyle="{StaticResource SelectionListBoxItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem IsSelected="{Binding IsSelected, Mode=TwoWay}" HorizontalContentAlignment="Stretch" KeyboardNavigation.TabNavigation="None">
<CheckBox Cursor="Hand" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Text}" HorizontalContentAlignment="Stretch" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
some of the binding properties are changed please correct them according to your properties .And also the style of your brush.I hope this will help.