How to take whole width of the screen when binding dynamic values in Universal windows Application

Question

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>

Answer 1

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>