Control to Grid to take fully available space inside another grid

Question

I have an app in which I have created a Grid with 3 rows and 2 columns. Each cell contains a Grid which contains rectangle,Image and Textblock. I want this grid in cell to take full area available but it takes area which contains rectangle,image and textblock only. How to force it to use full space? Is there any other control which I can use? Here is my code

<Grid Grid.Row="1" Margin="0,15,0,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Grid Name="btn_discount_gift_cards" Width="Auto" Height="Auto"
          HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1" Grid.Column="0" 
          Margin="12" Tapped="btn_discount_gift_cards_Tapped">

        <Grid x:Name="Back">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="2.3*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="/Images/Demo.png"/>
            <TextBlock Grid.Column="1" Text="Text SHown" FontSize="20"
                       Style="{StaticResource TilesText}" TextWrapping="Wrap" 
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Grid>
</Grid>

Answer 1

>>I want this grid in cell to take full area available but it takes area which contains rectangle,image and textblock only. How to force it to use full space?

If you want the btn_discount_gift_cards Grid to fill the available space of the individual cell, you should remove the margins and don't set the HorizontalAlignment and VerticalAlignment properties to anything else than Stretch (which is the default value). If you set a Background you will see that it then fills the available space of the cell:

        <Grid Grid.Row="1" Margin="0,15,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid Background="Yellow" Name="btn_discount_gift_cards" Grid.Row="1" Grid.Column="0" Tapped="btn_discount_gift_cards_Tapped">
                <Grid x:Name="Back">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="2.3*"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="/Images/Demo.png"/>
                    <TextBlock Grid.Column="1" Text="Text SHown" FontSize="20"
                       Style="{StaticResource TilesText}" TextWrapping="Wrap" 
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </Grid>
        </Grid>

You might as well also remove the inner "Back" Grid and move the ColumnDefinitions to the outer "btn_discount_gift_cards" Grid:

        <Grid Grid.Row="1" Margin="0,15,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
            <Grid Background="Yellow" Name="btn_discount_gift_cards" Grid.Row="1" Grid.Column="0" Tapped="btn_discount_gift_cards_Tapped">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="2.3*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="/Images/Demo.png"/>
                <TextBlock Grid.Column="1" Text="Text SHown" FontSize="20"
                       Style="{StaticResource TilesText}" TextWrapping="Wrap" 
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </Grid>

Hope that helps. 

Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question. Please don't post several questions in the same thread.

Answer 2

Thanks it resolved my problem.