"auto"값으로 높이에 바인딩하는 방법

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를 사용하여, 나는 단지 한방향 모드를 사용할 수 있습니다. 높이 값은 NaN입니다. Rec2의 값은 0이지만 Rec1의 ActualHeight는 0보다 큽니다.

바인딩을 사용하여 ActualHeight을 강제 적용 할 방법이 있습니까?

Answer 1

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

Answer 2

신장 및 너비가 "자동"인 다른 요소에 높이 및 너비를 바인딩 할 수 있습니까?

ActualHeight은 계산 된 속성입니다. ElementName 바인딩의 목적으로 ActualHeight은 변경 될 때 업데이트를 게시하지 않습니다 (비동기 및 런타임 계산 특성으로 인해). ElementName 바인딩의 바인딩 원본으로 ActualHeight을 사용하지 마십시오. 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; 
}