Question

当缩放内容时，是否可以在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中。

Answer 1

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

Answer 2

我通过使用Silverlight Toolkit中提供的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();
    }

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

2 个答案: