I am attempting to make a radio button template which will look like the following: enter image description here
And here is the template I have added:
<Style
x:Key="MainWindowTemplateConfigurationWindowRadioButtonStyle"
TargetType="RadioButton"
BasedOn="{StaticResource MainWindowRadioButtonImageStyle}">
<Setter
Property="Margin"
Value="3,3" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type RadioButton}">
<Border BorderThickness="2" BorderBrush="{StaticResource BRInactiveItemBackgroundBrush}" >
<StackPanel x:Name="Panel" Background="{StaticResource ControlsLightBorderBrush}" VerticalAlignment="Stretch"
>
<TextBlock x:Name="ButtonText" TextAlignment="Center" FontSize="25" Padding="7,7" VerticalAlignment="Center"
/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.SystemConfiguration}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="True" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource SystemConfigurationRadioButton}" />
<Setter
Property="Background"
TargetName="Panel"
Value="{StaticResource BRInactiveItemBackgroundBrush}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.SystemConfiguration}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="False" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource SystemConfigurationRadioButton}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.PlateSetup}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="True" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource PlateSetup}" />
<Setter
Property="Background"
TargetName="Panel"
Value="{StaticResource BRInactiveItemBackgroundBrush}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.PlateSetup}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="False" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource PlateSetup}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.ThermalCyclingProtocol}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="True" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource ThermalProtocol}" />
<Setter
Property="Background"
TargetName="Panel"
Value="{StaticResource BRInactiveItemBackgroundBrush}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.ThermalCyclingProtocol}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="False" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource ThermalProtocol}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.Reports}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="True" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource ReportsRadioButton}" />
<Setter
Property="Background"
TargetName="Panel"
Value="{StaticResource BRInactiveItemBackgroundBrush}" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
Value="{x:Static views:DisplayModes.Reports}"/>
<Condition
Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
Value="False" />
</MultiDataTrigger.Conditions>
<Setter
Property="Text"
TargetName="ButtonText"
Value="{StaticResource ReportsRadioButton}" />
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
However, the result I am getting is looking like this: enter image description here
I have tried playing with all the properties between the StackPanel and the TextBlock to align the text in the center of the radio button, but when I do get that, I have a result of the text being centrally aligned, but then the content doesn't fit to fill the space of the radio button. I can't attach any more images, since I don't have enough reputation, apologies...
which i essentially get by changing the StackPanel's VerticalAlignment to Center from Stretch, but then it doesn't fill the whole region correctly. I am forcing the height of each RadioButton where I consume this style to be the same height of the tallest button (the one saying Thermal Cyling Protocol), and it doesn't seem like I can figure out how to make both the text be centered and fill in the extra height at the same time...
Any help would be appreciated. Here is how I am laying out the Radio Button if it helps:
<Grid Margin="5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition SharedSizeGroup="A"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RadioButton Grid.Row="0" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}"
HorizontalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=ThermalCyclingProtocolButton}"
Tag="{x:Static views:DisplayModes.SystemConfiguration}">
</RadioButton>
<RadioButton Grid.Row="1" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}"
HorizontalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=ThermalCyclingProtocolButton}"
Tag="{x:Static views:DisplayModes.PlateSetup}">
</RadioButton>
<RadioButton Grid.Row="2" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}"
HorizontalAlignment="Stretch" x:Name="ThermalCyclingProtocolButton"
Tag="{x:Static views:DisplayModes.ThermalCyclingProtocol}">
</RadioButton>
<RadioButton Grid.Row="3" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}"
HorizontalAlignment="Stretch"
Height="{Binding ActualHeight, ElementName=ThermalCyclingProtocolButton}"
Tag="{x:Static views:DisplayModes.Reports}">
</RadioButton>
</Grid>
</Grid>
</Grid>
</Grid>
Changed the panel in the template from being a StackPanel to being a Grid. This has now achieved the effect for which I was looking.