Binding selectedItem ListBox of Radio buttons in combobox popup - wpf

Ok, so my question is kind of convoluted, so I'll try to be as clear as possible. Because a collection of radio buttons does not have a 'SelectedItem/Value' property, I have collected my radioButtons into a ListBox, based on some XAML I found online. Now, in order to save space on the UI, that ListBox is taking over the content of a ComboBox popup. (So when you click the comboBox, what drops down is a list of radiobuttons in a WrapPanel.) I have been able to successfully bind the RadioButton listbox control by itself to an itemssource and bind selected value to a property, but once inside the combo box, I cannot seem to get the selected value binding to work properly, (ItemsSource still works fine).
<Style x:Key="RadioButtonList" TargetType="{x:Type ListBox}">
<Setter Property="Background" Value="White"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapPanel Background="Transparent" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="Margin" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderThickness="1" Background="Transparent">
<RadioButton Focusable="False" Width="120"
IsHitTestVisible="False"
Content="{Binding Name}"
IsChecked="{TemplateBinding IsSelected}">
</RadioButton>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border BorderThickness="0" Padding="0" BorderBrush="Transparent" Background="Transparent" Name="Bd" SnapsToDevicePixels="True">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RadioButtonCombo" TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
DataContext="{TemplateBinding ItemsSource}"
Content="{Binding ElementName=DropDownContent, Path=SelectedItem.Name}"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press" />
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="WhiteSmoke"
BorderThickness="1" BorderBrush="Black"/>
<ListBox Name="DropDownContent" Style="{StaticResource RadioButtonList}"
Width="{TemplateBinding MaxWidth}"
SelectedValue="{Binding Path=SelectedValue, RelativeSource={RelativeSource TemplatedParent}}"
ItemsSource="{TemplateBinding ItemsSource}">
</ListBox>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
My use of that looks like this:
<ComboBox Name="SourceComboCtl"
Text="Source"
SelectedValuePath="CodeId"
DisplayMemberPath="Name"
SelectedValue="{Binding Path=SourceCode}"
Style="{StaticResource RadioButtonCombo}"
Width="60"
MaxWidth="150" />

I'm a bit confused why you'd first overwrite a ListBox to display RadioButtons, then overwrite a ComboBox to use a ListBox to display RadioButtons
Why not just overwrite ComboBox.ItemTemplate and skip the ListBox alltogether? ComboBox has SelectedItem/Value too
Here's my RadioButtonListBox Style. I simply changed where it says ListBox to say ComboBox
<Style x:Key="RadioButtonComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Cycle" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}" >
<Setter Property="Margin" Value="2, 2, 2, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="Transparent">
<RadioButton IsHitTestVisible="False" Focusable="false"
Content="{TemplateBinding ContentPresenter.Content}"
IsChecked="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>

Related

DatePicker template, borders appear on mouse over

I have a weird problem,
My DatePicker shows in the middle some borders. I don't know where it comes from.
I changed every property of the DatePickerTextBox but it doesn't change anything.
Here is the XAML :
<Window.Resources>
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="5">
<Grid x:Name="PART_Root" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<DatePickerTextBox x:Name="PART_TextBox"
BorderThickness="0"
BorderBrush="Transparent"
HorizontalContentAlignment="Stretch"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="Center"
Visibility="Visible"
SelectionBrush="#FF6F5DF5"
FocusVisualStyle="{x:Null}"
Grid.Column="0" Margin="0,3,0,0">
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
</DatePickerTextBox>
<Button x:Name="PART_Button" HorizontalAlignment="Right" Margin="0,0,0.333,0.333" Width="24">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image Source="Resources/Images/down.png"></Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Popup x:Name="PART_Popup" StaysOpen="False" AllowsTransparency="True" Margin="0,0,0.333,0.333" />
<Label x:Name="lblLabel" Content="{TemplateBinding Uid}" HorizontalContentAlignment="Center" Foreground="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0" Padding="12,0" FontFamily="Poppins" VerticalContentAlignment="Stretch" Margin="6,-11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
<Setter TargetName="PART_TextBox" Property="BorderThickness" Value="0"/>
<Setter Property = "BorderBrush" Value="{Binding ToYourBorder}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DatePicker Margin="10,260,0,0" VerticalAlignment="Top" Uid="Date de naissance *" FontSize="12" Height="40" BorderThickness="0" HorizontalAlignment="Left" Width="181" FontFamily="Poppins" Background="#FFFEFEFE" BorderBrush="#FF9A9A9A" Foreground="#FF727272" />
And here how it seems :
And on hover, there is another thin border inside :
Any idea, please?
DatePickerTextBox has it's own Template where the border and the triggers for the border are defined/hardcoded.
You need to take care of those in the template of DatePickerTextBox.
Change:
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
To:
<DatePickerTextBox.Style>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox" BorderThickness="0"
Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePickerTextBox.Style>
And it should work.
For a complete Template see DOCS

WPF List View Grouping Scroll Offset with Headers

I have an odd issue with a WPF listview:
Background
Using WPF ListView
Using Grid View to add columns
Virtualizing
Using 4 layers of groups to group the data into expanders in a hierarchical structure
Binding to CollectionViewSource defined in window.resources
Due to indentation of the data (the data is contained in expanders) the headers are offset from the column data so I use TranslateTransform to offset the headers by a small amount
Problem
Everything displays correctly and in the perfect hierarchical structure, however when I scroll to the right, there comes a point when the data keeps scrolling but the headers stop, which results in an offset between the headers and the data columns.
I am sure this has something to do with the way I am offsetting the headers, and the length of the headers compared to the data but I cant seem to find the reason for this problem.
List View Scrolled to just before the offset point
List View Scrolled to the end
Code
nb. I have omitted some style stuff as there is a limit on characters for answers here
<!-- The main grid -->
<ListView x:Name="DataGrid"
Margin="0"
Background="{StaticResource MainBackgroundBrush}"
BorderThickness="0"
Foreground="{StaticResource LightBackgroundBrush}"
ItemsSource="{Binding Source={StaticResource DataCollectionView}}"
ScrollViewer.IsDeferredScrollingEnabled="False"
SelectionMode="Single"
VirtualizingPanel.CacheLength="1,2"
VirtualizingStackPanel.IsContainerVirtualizable="True"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.IsVirtualizingWhenGrouping="True"
VirtualizingStackPanel.ScrollUnit="Pixel"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<!-- Some styles and resources exclusive to this list view -->
<ListView.Resources>
<Setter Property="IsExpanded" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<DockPanel>
<ToggleButton x:Name="HeaderSite"
Width="600"
MinWidth="0"
MinHeight="0"
Margin="1"
Padding="{TemplateBinding Padding}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="{TemplateBinding Background}"
Content="{TemplateBinding Header}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
DockPanel.Dock="Top"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}"
FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Template="{StaticResource AnimatedExpanderButton}" />
<ContentPresenter x:Name="ExpandSite"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
DockPanel.Dock="Bottom"
Focusable="false"
Visibility="Collapsed" />
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="true">
<Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter TargetName="HeaderSite" Property="Background" Value="Red" />
<Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Top" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Name}" Value="Title">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="IsExpanded" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
<!-- Styles the column headers -->
<Style TargetType="{x:Type GridViewColumnHeader}">
<!-- Add the event handler for a right click on the header -->
<EventSetter Event="MouseRightButtonUp" Handler="GridViewColumnHeader_MouseRightButtonUp" />
<Setter Property="Background" Value="{StaticResource GradientBrush}" />
<Setter Property="ClickMode" Value="Press" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="{StaticResource LightBackgroundBrush}" />
<Setter Property="Height" Value="30" />
<Setter Property="MinWidth" Value="20" />
<!-- Offset the column headers to match the column data as the expanders will have offset the data -->
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="13" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border BorderBrush="Black" BorderThickness="1,0,0,1">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- The two column re sizers -->
<Thumb x:Name="PART_HeaderGripper"
Width="18"
Margin="0,0,-10,0"
HorizontalAlignment="Right"
Background="Black"
Cursor="SizeWE">
<Thumb.Template>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}" Background="Transparent">
<Rectangle Width="1"
HorizontalAlignment="Center"
Fill="{TemplateBinding Background}" />
</Border>
</ControlTemplate>
</Thumb.Template>
</Thumb>
<!-- The main content of the header -->
<ContentPresenter Name="HeaderContent"
Grid.Column="0"
Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
<!-- Templates each level -->
<ListView.GroupStyle>
<!-- Style for groups at the top level. this level is equivalent to a single database -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Border Margin="1"
Background="{StaticResource FandFBrush}"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="3">
<Expander Margin="0"
FontSize="12"
FontWeight="Bold"
Foreground="{StaticResource LightBackgroundBrush}"
Header="{Binding Name}"
IsExpanded="True">
<ItemsPresenter x:Name="IP"
Margin="0"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingPanel.ScrollUnit="Item"
VirtualizingPanel.VirtualizationMode="Recycling" />
</Expander>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups at the second level. this level is equivalent to a single case -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Border Margin="0"
Background="{StaticResource MainBackgroundBrush}"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="3">
<Expander Margin="0"
FontSize="12"
FontWeight="Bold"
Foreground="{StaticResource LightBackgroundBrush}"
Header="{Binding Name}"
IsExpanded="True">
<ItemsPresenter x:Name="IP"
Margin="0"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingPanel.ScrollUnit="Item"
VirtualizingPanel.VirtualizationMode="Recycling" />
</Expander>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups at the third level. this level is equivalent to a single sample type -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Border Margin="1"
BorderBrush="Black"
BorderThickness="0"
CornerRadius="3">
<ItemsPresenter x:Name="IP"
Margin="0"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingPanel.ScrollUnit="Item"
VirtualizingPanel.VirtualizationMode="Recycling" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups at the fourth level. this level is equivalent to a single sample -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Border Margin="0,0,0,1"
Background="Transparent"
BorderBrush="Black"
BorderThickness="2,2,2,2"
CornerRadius="3,3,0,0"
Visibility="{Binding Items[0].Fragment.Sample.IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
<Expander Margin="0"
FontSize="12"
FontWeight="Bold"
Foreground="Black"
IsExpanded="True">
<Border Grid.Row="0"
Margin="1,0,1,1"
Background="{StaticResource MainBackgroundBrush}"
BorderBrush="Black"
BorderThickness="2,1,2,2"
CornerRadius="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- The measurements themselves -->
<Border Grid.Row="0"
Margin="0"
Background="{StaticResource MainBackgroundBrush}"
BorderBrush="Black"
BorderThickness="0,0,0,1"
CornerRadius="0">
<ItemsPresenter x:Name="IP"
Margin="0"
VirtualizingPanel.IsContainerVirtualizable="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingPanel.ScrollUnit="Item"
VirtualizingPanel.VirtualizationMode="Recycling" />
</Border> </Grid>
</Border>
</Expander>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
</ListView>

Text inside SliderThumbStyle

So this is my SliderThumbStyle Style:
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Border Name="outerBorder"
Background="{DynamicResource LabelDisableForegroundColor}"
BorderBrush="{DynamicResource LabelDisableForegroundColor}"
Height="20"
Width="20"
Opacity="1"
BorderThickness="2"
CornerRadius="8"/>
<TextBlock x:Name="sliderValue"
FontSize="11"
Foreground="Silver"
Text="{Binding }"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And as you can see i put inside the Thumb a simple TextBlock in oder to see the current Slider value
What i need to put inside the Text property:
Text="{Binding }"
This should work provided that the Thumb is a visual child of the Slider:
<TextBlock Text="{Binding Value, RelativeSource={RelativeSource AncestorType=Slider}}" />

Trigger command when ListBox selected item changes

I am trying to set up a sort of menu using ListBox and buttons as ListBoxItems to trigger a command when selection changes, but the result is that some times the selected ListBoxItem is changed but the command is not triggered, other times the opposite. The XAML is the following:
<Window.Resources>
<DataTemplate DataType="{x:Type viewModels:TripViewModel}">
<views:TripView />
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:AddTripViewModel}">
<views:AddTripView />
</DataTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Height"
Value="50" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Grid Background="Transparent">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Padding"
Value="3" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderBrush="Transparent"
BorderThickness="0"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="DarkCyan" />
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="DarkCyan" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Window.Content>
<DockPanel Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="Auto"
Width="Auto"
LastChildFill="True">
<!-- Left Panel -->
<Border BorderBrush="Black"
BorderThickness="0,0,1,0">
<StackPanel DockPanel.Dock="Left"
Margin="0"
Background="#555D6F">
<!-- First Row: Stacco Image -->
<Image Height="183"
Width="275"
Margin="3"
Source="/Media/stacco.png" />
<!-- Second Row: Buttons -->
<ScrollViewer CanContentScroll="True"
VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Auto"
Margin="0,10,0,0">
<ListBox Name="MenuButtons"
ItemsSource="{Binding PageViewModels}"
Background="#555D6F"
IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<ItemContainerTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
Margin="0" />
</ItemContainerTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</StackPanel>
</Border>
<!-- Control Area: Different View made by controls -->
<ContentControl DockPanel.Dock="Right"
Content="{Binding CurrentPageViewModel}" />
</DockPanel>
</Window.Content>
Am I doing right trying to insert a button in the ItemContainerTemplate? Would it be better to use the code behind to trigger the selection changed?

Changing font size of a button

In my .xaml file these are my resources:
<DataTemplate DataType="{x:Type vm:KeyModel}">
<TextBlock DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" FontFamily="Verdana" FontSize="26" Margin="0" >
<Run Text="{Binding Content.Text, Mode=OneWay}" />
</TextBlock>
</DataTemplate>
And here's the style:
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="8" BorderBrush="#006AB6" BorderThickness="1" Name="border" Background="{TemplateBinding Background}">
<Grid x:Name="grid" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="18"/>
</Style>
And in code I have:
<Button Name="btn_Q" FontSize="8" Content="{Binding KB.Key_Q}" Grid.Column="1" Style="{DynamicResource RoundCorner}"/>
<Button Name="btn_A" Content="{Binding KB.Key_A}" Grid.Column="1" Style="{DynamicResource RoundCorner}"/>
But the FontSize for btn_Q doesn't get to be 8. How can I fix it? I need to make only btn_Q to have a fontsize of 8. All of my other buttons, like btn_A are fine with the style's fontsize.

Resources