UWP GridView 在更改大小时调整一列的大小答案

【问题标题】：UWP GridView resize one column on changing sizeUWP GridView 在更改大小时调整一列的大小
【发布时间】：2016-12-28 13:06:49
【问题描述】：

我有以下页面设置，包含一个包含两列的网格视图：图像和标题。并非所有行都有图像，我正在尝试将图像设为行宽的一半。因此，对于没有可用图像的行，文本应填满整行，而带有图像的行将在其上显示图像行的一半，其余行的标题。

我已使用 MathConverter 将 imageWidth 调整为实际行宽度的一半，但在调整大小时（在调整主窗口大小时在桌面上，在更改设备方向时在手机/平板电脑上）图像大小未更新。

 <Page.Resources>
    <local:MathConverter x:Key="MathConverter"/>
    <ItemsPanelTemplate x:Key="Compact">
        <ItemsStackPanel/>
    </ItemsPanelTemplate>
    <DataTemplate x:Key="LargeWidthDataTemplate">
        <Border BorderThickness="0,0,0,1" HorizontalAlignment="Stretch">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="{Binding ImageURL}" MaxWidth="{Binding ActualWidth, ElementName=gridView, Converter={StaticResource MathConverter}}" Margin="4"/>
                <TextBlock Grid.Column="1" Text="{Binding Title}" 
                               Loaded="TextBlock_Loaded" HorizontalAlignment="Stretch" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
            </Grid>
        </Border>
    </DataTemplate>
</Page.Resources>

<Grid>
    <GridView x:Name="gridView" Grid.Row="2" SizeChanged="gridView_SizeChanged"
              ItemsPanel="{StaticResource Compact}" ItemTemplate="{StaticResource LargeWidthDataTemplate}">
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
            </Style>
        </GridView.ItemContainerStyle>
    </GridView>
</Grid>

【问题讨论】：

标签： windows gridview uwp

【解决方案1】：

出于 ElementName 绑定的目的，ActualWidth 在更改时不会发布更新（由于其异步和运行时计算的性质）。不要尝试将 ActualWidth 用作 ElementName 绑定的绑定源。如果您有需要根据 ActualWidth 进行更新的场景，请使用 SizeChanged 处理程序。

更多信息，请参阅FrameworkElement.ActualWidth的备注。

所以你应该能够在你的页面中添加一个属性并且页面需要实现INotifyPropertyChanged 接口。在 SizeChanged 事件中，我们应该能够将 ActualWidth 设置为属性。然后我们可以将MaxWidth 属性绑定到该属性。

例如：

private double myActualWidth;

public double MyActualWidth
{
    get
    {
        return myActualWidth;
    }
    set
    {
        if (myActualWidth != value)
        {
            myActualWidth = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("MyActualWidth"));
            }
        }
    }
}

private void NotifyPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

public event PropertyChangedEventHandler PropertyChanged;

private void gridView_SizeChanged(object sender, SizeChangedEventArgs e)
{
    this.MyActualWidth = gridView.ActualWidth;
}

【讨论】：