I try to populate radio buttons dynamically in Universal windows application. I already wrote VisualState
for different
of screens. Now I try to populate the radio button, which are they have to take the whole width of the window. I able to set fixed width for every VisualState But I think that may not good practice and difficult to handle further.
<GridView Grid.Row="1" Height="auto" Width="auto" HorizontalAlignment="Stretch" ItemsSource="{Binding DamageLocationList}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:DataType="model:DamageLocations">
<Grid>
<RadioButton Style="{StaticResource ButtonRadioButtonStyle}" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" IsChecked="{Binding IsChecked, UpdateSourceTrigger=PropertyChanged}" Content="{Binding DamageLocation}" Margin="0" Click="RadioButton_Checked" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
As @Ashok Rathod said, you can try using UniformGrid
as the ItemsPanel
of your Grid
to make your radio buttons take the whole width of your app's window.
Although UniformGrid
is not exist in UWP. But we can implement it by ourselves or use a third party UniformGrid
like what in WinRTXamlToolkit.
Using WinRTXamlToolkit for example, we can using
<toolkit:UniformGrid Rows="1" />
instead of
<VariableSizedWrapGrid Orientation="Horizontal" />
Here toolkit
is the namespace of WinRTXamlToolkit.Controls
:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
As I didn't set Columns
property, it will be the default value which is 0
. A value of zero (0) for the Columns property specifies that the column count is computed based on the number of rows and the number of visible child elements that are in the Grid. Since I set Rows
to 1
, all the items will be put in one row and have the same width.
After this, you may also need to set ItemContainerStyle
to make the radio buttons stretch like:
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</GridView.ItemContainerStyle>