当内容缩放时，XAML网格列的大小调整

Question

当缩放内容时，是否可以自动调整XAML中的网格列的大小？

下面是两个截图，以更好地解释我的意思。当用户控件首次显示它看起来像：

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

意图是白色圆角矩形（与正文块，组合框和滑块）应始终被放置关闭的灰色矩形的右边。但是，当灰色矩形从后面的代码中放大时，网格列宽度不会增加以适应此情况，并创建重叠，如下所示。

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

有一些方法，使此列变化自动宽度从XAML装进了控制？

我的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> 

注：这是在Silverlight。

Answer 1

我通过使用Silverlight工具包中提供的LayoutTransformer来解决此问题。我更新过的安置布局变压器标签内进行缩放的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" 
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，并补充说，将触发大规模当事件应改变。处理程序如下所示：

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

Answer 2

在Silverlight中，方法是给出行和列定义，它们分别定义单元格的特定高度和宽度。将灰色矩形设置为“拉伸”以填充单元格。现在，您可以修改定义的宽度和高度属性，其他单元格（及其内容）将相应地移动。