Grid auto width

Grid auto width

The question is simple as 1x1 and I suppose the answer is also that simple.

I would like to fit my grid's width and height to it's content. So if I change the content's size from code I would like the grid to have the same size.

I've tried the following:

    <Grid x:Name="ContainerGrid" Background="Cyan" MouseDown="ContainerGrid_Tapped_1">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="Auto" />             <ColumnDefinition Width="Auto"/>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="Auto"/>             <RowDefinition Height="Auto"/>         </Grid.RowDefinitions>         <StackPanel Grid.Column="0" Grid.Row="1">             <Rectangle x:Name="small" Fill="Red" Width="100" Height="100" Visibility="Visible"/>             <Rectangle x:Name="big" Fill="Green" Width="500" Height="500" Visibility="Collapsed"/>         </StackPanel>         <Grid x:Name="SelectedCheckMark"  Grid.Column="1" Grid.Row="0" Visibility="{Binding ElementName=big,Path=Visibility}">             <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"                    Fill="BlueViolet" Stretch="Fill"/>             <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z"                    Fill="White" FlowDirection="LeftToRight"                    HorizontalAlignment="Right" Height="15"  Stretch="Fill" VerticalAlignment="Top" Width="15"/>         </Grid>     </Grid> 

Code behind relevant part:

    private void ContainerGrid_Tapped_1(object sender, MouseButtonEventArgs e)     {         //Set opoosite visibility         small.Visibility = (small.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;         big.Visibility = (big.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;     } 

I would like that no Cyan color could be seen in any state of the grid. However now the width of the ContainerGrid does not fit to it's content.

What I've missed?

Answers & Comments...

Answer: 1

Try changing your XAML to the following:

<Grid x:Name="ContainerGrid" Background="Cyan" MouseDown="ContainerGrid_Tapped_1" HorizontalAlignment="Center" VerticalAlignment="Center">     <Grid.ColumnDefinitions>         <ColumnDefinition Width="Auto" />         <ColumnDefinition Width="Auto"/>     </Grid.ColumnDefinitions>     <Grid.RowDefinitions>         <RowDefinition Height="Auto"/>         <RowDefinition Height="Auto"/>     </Grid.RowDefinitions>     <StackPanel Grid.Column="0" Grid.Row="1">         <Rectangle x:Name="small" Fill="Red" Width="100" Height="100" Visibility="Visible"/>         <Grid>             <Rectangle x:Name="big" Fill="Green" Width="500" Height="500" Visibility="Collapsed"/>             <Grid x:Name="SelectedCheckMark"  Grid.Column="1" Grid.Row="0" Visibility="{Binding ElementName=big,Path=Visibility}" HorizontalAlignment="Right" VerticalAlignment="Top">                 <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z"                        Fill="BlueViolet" Stretch="Fill"/>                 <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z"                        Fill="White" FlowDirection="LeftToRight"                        HorizontalAlignment="Right" Height="15"  Stretch="Fill" VerticalAlignment="Top" Width="15"/>             </Grid>         </Grid>     </StackPanel> </Grid> 

by : Eirikhttp://stackoverflow.com/users/773118

Answer: 2

Try to work with HorizontalAlignment and VerticalAlignment Properties of ContainerGrid.

For example

<Grid x:Name="ContainerGrid" Background="Cyan" MouseDown="ContainerGrid_Tapped_1" Margin="0,0,0,0" ShowGridLines="True" Height="Auto" Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Top"> 

Their default value is Stretch, which means the grid will stretch within the entire space given by its parent element irrespective of the content.

by : Klaus78http://stackoverflow.com/users/592318

---