Question

使用UWP意味着我总是无法使用DIP值。我依靠“自动”尺寸，“拉伸”对齐等。我把问题缩小到了这个范围：

如何将元素的高度和宽度绑定到另一个元素，其高度和宽度为“自动”？

样品：

<Grid.RowDefinitions>
            <RowDefinition x:Name="CardGriddRow1" Height="2*" />
            <RowDefinition x:Name="CardGrdidRow2" Height="1*" />
</Grid.RowDefinitions>

        <Rectangle Name="Rec1" Fill="Blue"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="auto" Height="auto" Grid.Row="1" Margin="20" />
        <Rectangle Name="Rec2" Fill="Yellow" Grid.Row="0" Height="{x:Bind Rec1.ActualHeight, Mode=OneWay  }" Width="{x:Bind Rec1.ActualWidth, Mode=OneWay }"  HorizontalAlignment="Left" VerticalAlignment="Top"  />

使用ActualHeight时，我只能使用OneWay模式。高度值是NaN。 Rec2将具有0个值，但Rec1的ActualHeight大于0。

有没有办法强制Binding采取ActualHeight？

Answer 1

如何将元素的高度和宽度绑定到另一个元素，其高度和宽度为“自动”？

ActualHeight是计算属性。出于ElementName绑定的目的，ActualHeight在更改时不会发布更新（由于其异步和运行时计算的性质）。不要尝试使用ActualHeight作为ElementName绑定的绑定源。如果您的方案需要基于ActualHeight的更新，请使用SizeChanged处理程序。详情请参阅ActualHeight财产。

虽然更新了你的代码片段以使用绑定，但如下所示，它似乎有效，但你不应该使用它是不可靠的。

 <Rectangle Name="Rec1" Fill="Blue"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  Grid.Row="1" Margin="20" Height="auto" Width="auto" />
 <Rectangle Name="Rec2" Height="{Binding Path=ActualHeight,ElementName=Rec1}" Width="{Binding Path=ActualWidth,ElementName=Rec1}" HorizontalAlignment="Left" VerticalAlignment="Top"   Fill="Yellow" Grid.Row="0"/>

正如文档中提到的那样，您可以使用SizeChanged，例如：

<Rectangle Name="Rec1" SizeChanged="Rec1_SizeChanged" Fill="Blue"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"  Grid.Row="1" Margin="20" Height="auto" Width="auto" />
<Rectangle Name="Rec2" Fill="Yellow" Grid.Row="0"  HorizontalAlignment="Left" VerticalAlignment="Top"  />

代码背后：

private void Rec1_SizeChanged(object sender, SizeChangedEventArgs e)
{
    Rec2.Height = Rec1.ActualHeight;
    Rec2.Width = Rec1.ActualWidth;
}

Answer 2

我会尽可能地避免SizeChanged事件，因为当屏幕调整大小时它经常会触发它会导致UI开始冻结并降低帧速率。让Xaml做尽可能多的工作。我已经使用Xaml重新创建了您在评论中附加的链接中显示的场景。请参见屏幕截图：

它可能与您的完全不同，但可能有一些样式。

参见代码：

<Page>
  <Page.Resources>
    <Style TargetType="Rectangle">
      <Setter Property="VerticalAlignment"
              Value="Stretch"/>
      <Setter Property="HorizontalAlignment"
              Value="Stretch" />
    </Style>
  </Page.Resources>
  <Grid Background="Blue">
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Grid Grid.Row="0"
        Grid.RowSpan="2"
        Grid.Column="0"
        Grid.ColumnSpan="8">
    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="3*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Row="0"
               Grid.Column="1"
               Fill="Red" />
    <Rectangle Grid.Row="0"
               Grid.Column="2"
               Fill="Yellow" />
  </Grid>
    <Rectangle Grid.Row="2"
               Grid.Column="0"
               Fill="Blue" />
    <Rectangle Grid.Row="2"
               Grid.Column="1"
               Fill="Red" />
    <Rectangle Grid.Row="2"
               Grid.Column="2"
               Fill="Green" />
    <Rectangle Grid.Row="2"
               Grid.Column="3"
               Fill="Yellow" />
    <Rectangle Grid.Row="2"
               Grid.Column="4"
               Fill="Brown" />
    <Rectangle Grid.Row="2"
               Grid.Column="5"
               Fill="Pink" />
    <Rectangle Grid.Row="2"
               Grid.Column="6"
               Fill="Purple" />
    <Rectangle Grid.Row="2"
               Grid.Column="7"
               Fill="Orange" />
  </Grid>
</Page>

如何使用“自动”值绑定到高度

2 个答案: