I need to change static content to dynamic content. Here is a snippet of my current code:
<Grid Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Center"><RadioButton IsChecked="{Binding SelectedLetter, ConverterParameter='A', Converter={StaticResource InputLetterToBooleanConverter}, Mode=TwoWay}" Name="radioA" Content="A" HorizontalAlignment="Left" VerticalAlignment="Top" Width="48.5" Height="45" Style="{DynamicResource RadioButtonInputs}" FontSize="36" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{DynamicResource BrushLetterA}" Cursor="Hand"/><RadioButton IsChecked="{Binding SelectedLetter, ConverterParameter='B', Converter={StaticResource InputLetterToBooleanConverter}, Mode=TwoWay}" Name="radioB" Content="B" HorizontalAlignment="Left" Margin="53.5,0,0,0" VerticalAlignment="Top" Width="48.5" Height="45" Style="{DynamicResource RadioButtonInputs}" FontSize="36" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{DynamicResource BrushLetterB}" Cursor="Hand"/><RadioButton IsChecked="{Binding SelectedLetter, ConverterParameter='C', Converter={StaticResource InputLetterToBooleanConverter}, Mode=TwoWay}" Name="radioC" Content="C" HorizontalAlignment="Left" Margin="107,0,0,0" VerticalAlignment="Top" Width="48.5" Height="45" Style="{DynamicResource RadioButtonInputs}" FontSize="36" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{DynamicResource BrushLetterC}" Cursor="Hand"/><RadioButton IsChecked="{Binding SelectedLetter, ConverterParameter='D', Converter={StaticResource InputLetterToBooleanConverter}, Mode=TwoWay}" Name="radioD" Content="D" HorizontalAlignment="Left" Margin="160.5,0,0,0" VerticalAlignment="Top" Width="48.5" Height="45" Style="{DynamicResource RadioButtonInputs}" FontSize="36" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{DynamicResource BrushLetterD}" Cursor="Hand"/></Grid>
And here is what it generates:
You see, there are always 4 letters (A, B, C, D), however, now I have to change this code to support dynamic number of letters, from A to D. So could be A B, or A B C, or just A. The maximum letter is D.
So, I thought to use ListBox (because user can selected a letter) and a ValueConverter to proper choose the Foreground Brush depending on the letter. That's not the problem.
The problem is that I can't use the RadioButtons anymore. I need to use some other control right? In the same time, I need the stylish of the RadioButton: depth, mouse over. How can I apply the style on the Item of the ListBox:
Here's the style:
<Style x:Key="RadioButtonInputs" TargetType="{x:Type RadioButton}"><Setter Property="BorderThickness" Value="1"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Padding" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RadioButton}"><Grid x:Name="grid" Margin="0"><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CommonStates"/><VisualStateGroup x:Name="FocusStates"/><VisualStateGroup x:Name="CheckStates"><VisualState x:Name="Checked"/><VisualState x:Name="Unchecked"/><VisualState x:Name="Indeterminate"/></VisualStateGroup><VisualStateGroup x:Name="ValidationStates"/></VisualStateManager.VisualStateGroups><Rectangle x:Name="normal" RadiusY="1.167" RadiusX="1.167" Width="Auto" Height="Auto" Margin="0" Stroke="{DynamicResource BrushToggleButtonStrokeNormal}" HorizontalAlignment="Stretch" Grid.Row="0" Grid.ColumnSpan="1" Grid.Column="0" Grid.RowSpan="1" StrokeThickness="2" d:IsEffectDisabled="True" Fill="{DynamicResource BrushToggleButtonFill}"/><Rectangle x:Name="mouse_over" RadiusY="1.167" RadiusX="1.167" Width="Auto" Height="Auto" Margin="0" Stroke="#00000000" HorizontalAlignment="Stretch" Grid.Row="0" Grid.ColumnSpan="1" Grid.Column="0" Grid.RowSpan="1" StrokeThickness="4" Visibility="Hidden" Fill="{DynamicResource BrushToggleButtonFill}"><Rectangle.Effect><ee:BloomEffect BloomIntensity="1" BaseSaturation="1" BaseIntensity="1" BloomSaturation="1" Threshold="0"/></Rectangle.Effect></Rectangle><Rectangle x:Name="clicked" RadiusY="1.167" RadiusX="1.167" Width="Auto" Height="Auto" Margin="0" Stroke="#00000000" HorizontalAlignment="Stretch" Grid.Row="0" Grid.ColumnSpan="1" Grid.Column="0" Grid.RowSpan="1" StrokeThickness="4" Visibility="Hidden" Fill="{DynamicResource BrushToggleButtonFill}"><Rectangle.Effect><ee:ColorToneEffect DarkColor="Black" Desaturation="0.41" ToneAmount="0.48" LightColor="Black"/></Rectangle.Effect></Rectangle><Label Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalContentAlignment="Center" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{DynamicResource FontFamily}" HorizontalAlignment="Center" Height="38.93" Margin="13.03,-3.93,11.75,10" Padding="0,0,0,-1" VerticalContentAlignment="Center"/></Grid><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="true"><Setter Property="Stroke" TargetName="normal" Value="{DynamicResource BrushBorderBlueButton2}"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Visibility" TargetName="clicked" Value="Visible"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Visibility" TargetName="mouse_over" Value="Visible"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" TargetName="grid" Value="{DynamicResource DoubleOpacity}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
Here's the new (not yet all implemented) ListBox:
<Grid Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Center"><ListBox ItemsSource="{Binding Inputs}" Background="Transparent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" BorderThickness="0"><ItemsControl.ItemTemplate><DataTemplate><RadioButton Margin="1" Content="B" Width="48.5" Height="45" Style="{DynamicResource RadioButtonInputs}" FontSize="36" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{DynamicResource BrushLetterB}" Cursor="Hand"/></DataTemplate></ItemsControl.ItemTemplate><ListBox.ItemsPanel><ItemsPanelTemplate><UniformGrid Rows="1" Columns="4" /></ItemsPanelTemplate></ListBox.ItemsPanel></ListBox></Grid>Also, which control do I use instead of RadioButton?
Take a look at WPF FlashMessage
About.me