[WPF] Grid 列如何自适应并且能动态调整其大小

Question

想要实现这样的效果：
Grid里有两列： 第一列是图片，第二列显示图片的名字等信息。 一开始的时候图片大小为48*48的，当鼠标点击图片后希望图片能变大成64*64的，一开始我是这样定义Grid的：
 <Grid Width="200">
       <Grid.ColumnDefinitions>
          <ColumnDefinition  MinWidth="48"  Width="48" />
          <ColumnDefinition  />
       </Grid.ColumnDefinitions>
但是点击图片时没办法动态更改第一列的宽度了，如果我把第一列设为Width="*"，  这样显示的效果又不行，因为第一列会自动拉申占用第二列留下后的宽度。我希望是第一列大小是设定的，然后第二列自适应。比如一开始第一列设了48，那么剩下的152都是第二列的， 当我点击图片是，图片会换成96*96的，那么该行的第一列宽度也会调整到96， 剩下的104为第二列的宽度。不知能否实现这样的效果， 有相应的例子更好：）

Answer 1

偶刚看这个WPF。。来接点分再说

Answer 2

搂分~设置成Auto[code=XAML]
<Grid Height="200">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Name="btn1" Grid.Row="0" Height="30" Background="Yellow"/>
    <Button Grid.Row="1" Background="Blue" Click="Button_Click"/>
</Grid>
[/code]
private void Button_Click(object sender, RoutedEventArgs e)
{
    btn1.Height = 80;
}
Hope helps

Answer 3

解决了，谢谢<Grid Width="300">
    <Grid.ColumnDefinitions>
        <ColumnDefinition   Width="Auto" />
        <ColumnDefinition  />
     </Grid.ColumnDefinitions>
 <!-- Thumbnail for Item-->
   <Grid x:Name="imageGrid"  MouseDown="Image_MouseDown" Grid.Column="0" Width="58" Height="58">
      <Border  MouseDown="imageBorder_MouseDown" x:Name="imageBorder" Margin="10" BorderThickness="1" BorderBrush="Black"         Background="White">
          <Image Source="{Binding Path=Image}"  MouseDown="Image_MouseDown"/>
      </Border>
      <Image  Margin="2" VerticalAlignment="Top" Height="16"  Width="16" HorizontalAlignment="Left" Source="{Binding Path=Icon}" />
    </Grid>
  <!-- Name  for Item -->
   <StackPanel Grid.Column="1" Margin="2,0" HorizontalAlignment="Left" VerticalAlignment="Center">
       <TextBox  Text="{Binding Path=Name}" FontWeight="Bold" Margin="0,2,0,2"/>
   </StackPanel>
</Grid>我如上这样定义就可以work了， 一开始我这样设置第一列的Grid<Grid x:Name="imageGrid"  MouseDown="Image_MouseDown" Grid.Column="0"  Height="58"> 没有设置长度，刚开始显示的时候貌似58*58的（看上去像正方形），然后鼠标点击后变成了58*78（代码里各加20但好像长度没设对，因为看上去是长方形了），再次点击的时候貌似变成了78*98，  有点奇怪，呵呵

Answer 4

在第一列的ColumnWidthChanged写段代码好了
让第二列列宽＝表宽－第1列列宽好了

Answer 5

例子：
xmal前台<Grid.ColumnDefinitions>
  <ColumnDefinition x:Name="columnOne" Width="Auto" />
  <ColumnDefinition />
  </Grid.ColumnDefinitions>
<Image x:Name="imageOne" Source="{Binding Path=Image}" MouseDown="Image_MouseDown"/>后台代码
columnOne.Width = new GridLength(imageOne.ActualWidth);