网格自动宽度答案

【问题标题】：Grid auto width网格自动宽度
【发布时间】：2012-10-31 11:09:11
【问题描述】：

问题很简单，1x1，我想答案也很简单。

我想让我的网格的宽度和高度适合它的内容。因此，如果我从代码中更改内容的大小，我希望网格具有相同的大小。

我尝试了以下方法：

    <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>

相关部分后面的代码：

    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;
    }

我希望在网格的任何状态下都看不到青色。但是现在 ContainerGrid 的宽度不适合它的内容。

我错过了什么？

【问题讨论】：

标签： c# wpf silverlight microsoft-metro

【解决方案1】：

尝试使用HorizontalAlignment 和VerticalAlignment 的ContainerGrid 属性。

例如

<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">

它们的默认值为 Stretch，这意味着网格将在其父元素给定的整个空间内拉伸，而与内容无关。

【讨论】：

【解决方案2】：

尝试将您的 XAML 更改为以下内容：

<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>

【讨论】：