UWP GridView在更改大小時調整一列的大小

我有以下頁面設置，其中包含具有兩列的網格視圖：圖像和標題。並不是所有的行都有圖像，我試圖將圖像放在行寬的一半。因此，對於沒有圖像可用的行，文本應填充整行，而具有圖像的行可在行的一半處顯示圖像，該行的其餘部分爲標題。UWP GridView在更改大小時調整一列的大小

我已經使用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>

來源

2016-12-28 Eddie

有關的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; 
}

來源

2017-01-03 07:34:19

UWP GridView在更改大小時調整一列的大小

回答

相關問題