缩放内容时调整 XAML 网格列的大小答案

【问题标题】：XAML grid column resizing when contents are scaled缩放内容时调整 XAML 网格列的大小
【发布时间】：2009-12-06 19:22:10
【问题描述】：

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

以下是两个屏幕截图，可以更好地解释我的意思。当 UserControl 首次显示时，它看起来像：

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 中。

【问题讨论】：

标签： silverlight xaml

【解决方案1】：

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

【讨论】：

抱歉，回到这里的速度很慢。调整网格行和列定义的大小是有意义的。然而，一个不同的问题出现在文本没有被缩放的地方。是否有一个属性可以根据其父容器的大小自动调整文本大小？如果没有，我可能需要创建一个自定义面板来调整缩放控件的大小。
看看 Toolkit ViewBox 控件，我相信它会按照您所追求的方式缩放内容。因此，将您的内容包装在此控件中，您应该会看到所需的结果。

【解决方案2】：

我使用 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();
    }

【讨论】：