Issue with nested grid on WPF

Question

I'm using by nested grid. In the main grid I have two radio buttons, while on the second I have two additional radio buttons, and other controls..

I want the total grid will be with 3 rows and 3 columns.

Relevant Code is:

    <xctk:WizardPage Name="Page3" PageType="Interior"
            Title="Stages" 
            Background="#FF27E0E0">
        <xctk:WizardPage.CanSelectNextPage>
            <MultiBinding Converter="{StaticResource NextFromPage3}">
                <Binding ElementName="HR" Path="IsChecked" Mode="OneWay"/>
                <Binding ElementName="LR" Path="IsChecked" Mode="OneWay"/>
                <Binding ElementName="yes" Path="IsChecked" Mode="OneWay"/>
                <Binding ElementName="no" Path="IsChecked" Mode="OneWay"/>
            </MultiBinding>
        </xctk:WizardPage.CanSelectNextPage>

        <Grid ShowGridLines="True" Margin="-5 -10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="qual" Content="Select Quality:"  FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
            <RadioButton x:Name="HR" Content="High-Resolution" FontSize="13.333" Grid.Column="1" Margin="5 10" VerticalAlignment="Top"/>
            <RadioButton x:Name="LR" FontSize="13.333" Content="Low-Resolution" Grid.Column="2" Margin="5 10" VerticalAlignment="Top"/>
            <Grid Grid.Row="1">
                <Grid.Visibility>
                    <MultiBinding Converter="{StaticResource FilterConverter}">
                        <Binding ElementName ="HR" Path="IsChecked" Mode="OneWay"/>
                        <Binding ElementName ="LR" Path="IsChecked" Mode="OneWay"/>
                    </MultiBinding>
                </Grid.Visibility>
                <Label x:Name="symbol" Content="Select Symbol:" Grid.Row ="1" Grid.Column="0" FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                <ComboBox x:Name="symbolsCmbBox" FontSize="13.333" Grid.Row="1" Grid.Column="1"  Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left" ItemTemplate="{StaticResource cmbTemplate}" IsSynchronizedWithCurrentItem="True" SelectedIndex="0">
                    <ComboBox.ItemsSource>
                        <MultiBinding Converter="{StaticResource SymbolComboboxItemsFilter}">
                            <Binding ElementName ="HR" Path="IsChecked" Mode="OneWay"/>
                            <Binding ElementName ="LR" Path="IsChecked" Mode="OneWay"/>
                        </MultiBinding>
                    </ComboBox.ItemsSource>
                </ComboBox>
                <Label x:Name="isExists" Content="Select Yes if process will perform:" Grid.Row ="2" FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                <RadioButton x:Name="yes" Content="Yes" FontSize="13.333" Grid.Row="2"  Grid.Column="1" Margin="5 10" VerticalAlignment="Top"/>
                <RadioButton x:Name="no" Content="No" FontSize="13.333" Grid.Row="2" Grid.Column="2" Margin="5 10" VerticalAlignment="Top"/>
            </Grid>
        </Grid>

The code above is part of wizard exists on WPF toolkit package. My issue with nested grid above that controls are not located as expected. While I used only one main grid, this issue wasn't happened, but I need the nested grid from other reasons..

EDIT-for the first answer: I want that the main grid will be the first line (3 columns) and the inner grid will start from the second line and will contains two lines in total (3 columns) so how to specify it?

EDIT-for the second answer:

The first row(main grid) isn't straight with the second and third row(inner grid)- it seems like both radio buttons of the main grid are locate only on column=2 even it doesn't seems from the xaml code. My code now is like appeared on the second answer below.

Thanks for your advice!

Answer 1

The row number and column numbers specified nested grid refers to the nested grid not the parent main grid. You need to define the grid as the following:

<Grid ShowGridLines="True" Margin="-5 -10">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="qual" Content="Select Quality:"  FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<RadioButton x:Name="HR" Content="High-Resolution" FontSize="13.333" Grid.Column="1" Margin="5 10" VerticalAlignment="Top"/>
<RadioButton x:Name="LR" FontSize="13.333" Content="Low-Resolution" Grid.Column="2" Margin="5 10" VerticalAlignment="Top"/>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.Visibility>
        <MultiBinding Converter="{StaticResource FilterConverter}">
            <Binding ElementName ="HR" Path="IsChecked" Mode="OneWay"/>
            <Binding ElementName ="LR" Path="IsChecked" Mode="OneWay"/>
        </MultiBinding>
    </Grid.Visibility>
    <Label x:Name="symbol" Content="Select Symbol:" Grid.Row ="0" Grid.Column="0" FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <ComboBox x:Name="symbolsCmbBox" FontSize="13.333" Grid.Row="1" Grid.Column="1"  Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left" ItemTemplate="{StaticResource cmbTemplate}" IsSynchronizedWithCurrentItem="True" SelectedIndex="0">
        <ComboBox.ItemsSource>
            <MultiBinding Converter="{StaticResource SymbolComboboxItemsFilter}">
                <Binding ElementName ="HR" Path="IsChecked" Mode="OneWay"/>
                <Binding ElementName ="LR" Path="IsChecked" Mode="OneWay"/>
            </MultiBinding>
        </ComboBox.ItemsSource>
    </ComboBox>
    <Label x:Name="isExists" Content="Select Yes if process will perform:" Grid.Row ="1" FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <RadioButton x:Name="yes" Content="Yes" FontSize="13.333" Grid.Row="1"  Grid.Column="1" Margin="5 10" VerticalAlignment="Top"/>
    <RadioButton x:Name="no" Content="No" FontSize="13.333" Grid.Row="1" Grid.Column="2" Margin="5 10" VerticalAlignment="Top"/>
</Grid>

Answer 2

You're attempting to use Grid.Row and Grid.Column on your inner grid, but there's no RowDefinitions or ColumnDefinitions specified. You need to specify them for the inner grid, if you want that grid's children to be able to be in specific locations.

EDIT: Provided I understand your current requirements, you are wanting a 3x3 grid with a 2x3 grid starting inside, at the second row. (You probably only need a 2x3 grid, for the outer, but let's work with what you have.)

You need the row and column definitions that I mentioned, above, but you'll also need to do two other things. 1. Make sure that the Grid.Row of your children are set to 0 and 1, instead of 1, and 2, respectively, so that they coincide with the inner grid. 2. Make sure that the inner grid uses a span of 2 rows and a span of 3 columns to fill in the area that the outer grid owns.

It should look something like this: (Edit the row and column definitions if you need specific sizes)

<Grid ShowGridLines="True" Margin="-5 -10">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Label x:Name="qual" Content="Select Quality:"  FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
  <RadioButton x:Name="HR" Content="High-Resolution" FontSize="13.333" Grid.Column="1" Margin="5 10" VerticalAlignment="Top"/>
  <RadioButton x:Name="LR" FontSize="13.333" Content="Low-Resolution" Grid.Column="2" Margin="5 10" VerticalAlignment="Top"/>
  <Grid Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="3">
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.Visibility>
      <MultiBinding Converter="{StaticResource FilterConverter}">
        <Binding ElementName ="HR" Path="IsChecked" Mode="OneWay"/>
        <Binding ElementName ="LR" Path="IsChecked" Mode="OneWay"/>
      </MultiBinding>
    </Grid.Visibility>
    <Label x:Name="symbol" Content="Select Symbol:" Grid.Row ="0" Grid.Column="0" FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <ComboBox x:Name="symbolsCmbBox" FontSize="13.333" Grid.Row="0" Grid.Column="1"  Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left" IsSynchronizedWithCurrentItem="True" SelectedIndex="0">
      <ComboBox.ItemsSource>
        <MultiBinding Converter="{StaticResource SymbolComboboxItemsFilter}">
          <Binding ElementName ="HR" Path="IsChecked" Mode="OneWay"/>
          <Binding ElementName ="LR" Path="IsChecked" Mode="OneWay"/>
        </MultiBinding>
      </ComboBox.ItemsSource>
    </ComboBox>
    <Label x:Name="isExists" Content="Select Yes if process will perform:" Grid.Row ="1" FontSize="13.333" Margin="5 10" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    <RadioButton x:Name="yes" Content="Yes" FontSize="13.333" Grid.Row="1"  Grid.Column="1" Margin="5 10" VerticalAlignment="Top"/>
    <RadioButton x:Name="no" Content="No" FontSize="13.333" Grid.Row="1" Grid.Column="2" Margin="5 10" VerticalAlignment="Top"/>
  </Grid>
</Grid>