내용의 크기를 조정할 때 XAML 눈금 열 크기 조정

Question

내용의 크기가 조정되었을 때 XAML에서 눈금 열의 크기를 자동으로 조정할 수 있습니까?

다음은 의미를 더 잘 설명하는 두 개의 스크린 샷입니다. 의도는 (TextBlock에, 콤보 상자와 슬라이더) 흰색 둥근 사각형은 항상 회색 사각형의 오른쪽에 떨어져 위치해야한다는 것입니다

before scaling http://www.jason-mitchell.com/images/controlsBeforeScale.JPG

: UserControl을 먼저 표시되면 같습니다. 그러나 회색 사각형을 코드 배율에서 크기를 조정하면 그리드 열 너비가이 값을 수용하기 위해 증가하지 않고 아래와 같이 겹침을 만듭니다.

after scaling http://www.jason-mitchell.com/images/controlsAfterScale.JPG

XAML에서 내부 통제에 맞게 자동으로 열 변화 폭을 어떤 방법이 있습니까? 이 실버 라이트에 :

<UserControl 
x:Class="Project.Items.Bubble" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:Project.Items"> 
<UserControl.Resources> 
    <ResourceDictionary 
     Source="./Assets/BubbleResourceDictionary.xaml" /> 
</UserControl.Resources> 
<Grid 
    ShowGridLines="True"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition 
      Width="Auto" /> 
     <ColumnDefinition 
      Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <Grid 
     x:Name="ObjectRoot" 
     Style="{StaticResource ObjectRootStyle}"> 
     <Rectangle 
      Style="{StaticResource RectangleStyle}" /> 
     <Rectangle 
      Style="{StaticResource HighlightStyle}" /> 
     <TextBlock 
      Style="{StaticResource TextStyle}" 
      Text="&lt;Text&gt;" /> 
    </Grid> 
    <local:Editor 
     x:Name="Editor" 
     VerticalAlignment="Top" 
     HorizontalAlignment="Right" 
     Grid.Column="1" /> 
</Grid> 

참고 : 같은

내 XAML은 현재 보인다.

Answer 1

Silverlight Toolkit에 제공된 LayoutTransformer를 사용하여이 문제를 해결했습니다. 코드에서

<UserControl 
x:Class="Project.Items.Bubble" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:Project.Items" 
xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"> 
<UserControl.Resources> 
    <ResourceDictionary 
     Source="./Assets/BubbleResourceDictionary.xaml" /> 
</UserControl.Resources> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition 
      Height="Auto" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition 
      Width="Auto" /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <toolkit:LayoutTransformer 
     x:Name="LayoutTransformer"> 
     <toolkit:LayoutTransformer.LayoutTransform> 
      <ScaleTransform 
       x:Name="ScaleTransform" /> 
     </toolkit:LayoutTransformer.LayoutTransform> 
     <Grid 
      x:Name="ObjectRoot" 
      Grid.Row="1" 
      Grid.Column="1" 
      Style="{StaticResource ObjectRootStyle}"> 
      <Rectangle 
       Style="{StaticResource RectangleStyle}" /> 
      <Rectangle 
       Style="{StaticResource HighlightStyle}" /> 
      <TextBlock 
       Style="{StaticResource BubbleTextStyle}" 
       Text="&lt;Text&gt;" /> 
     </Grid> 
    </toolkit:LayoutTransformer> 
    <local:Editor 
     x:Name="Editor" 
     VerticalAlignment="Top" 
     HorizontalAlignment="Right" 
     Grid.Column="1" /> 
</Grid> 

은 내가으로 RenderTransform을 제거있어 뒤에 때 규모를 해고 이벤트를 추가 : 여기에서 볼 수 있듯이 나는 레이아웃 변압기 태그 내에서 확장 할 수있는 XAML을 배치 upated 변경해야합니다. 핸들러는 다음과 같습니다.

private void MindBubbleScaleChanged(object sender, ScaleChangedEventArgs e) 
    { 
     ScaleTransform.ScaleX += e.Delta; 
     ScaleTransform.ScaleY += e.Delta; 
     LayoutTransformer.ApplyLayoutTransform(); 
    } 

Answer 2

Silverlight에서 접근법은 셀의 높이와 너비를 각각 정의하는 행과 열 정의를 제공하는 것입니다. 셀을 채우려면 회색 직사각형을 늘이기로 설정하십시오. 이제 정의의 Width 및 Height 속성을 수정할 수 있으며 그에 따라 다른 셀 (및 해당 내용)도 적절하게 이동합니다.