Изменение размера столбца сетки XAML при масштабировании содержимого

Question

Можно ли автоматически изменять размер столбца сетки в XAML при масштабировании его содержимого?

Ниже приведены два скриншота, чтобы лучше объяснить, что я имею в виду. Когда пользовательский элемент управления отображается впервые, он выглядит следующим образом:

до масштабирования http://www.jason -mitchell.com / images / controlsBeforeScale.JPG

Предполагается, что белый прямоугольник с закругленными углами (с текстовым блоком, полем со списком и ползунком) всегда должен располагаться справа от серого прямоугольника. Однако, когда серый прямоугольник масштабируется из кода позади, ширина столбца сетки не увеличивается, чтобы приспособиться к этому, и создает перекрытие, как показано ниже.

после масштабирования 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 подход заключается в том, чтобы дать определения строк и столбцов, которые определяют для ячейки определенную высоту и ширину соответственно. Установите серый прямоугольник на Растянуть, чтобы заполнить ячейку. Теперь вы можете изменять свойства Width и Height определений, и другие ячейки (и их содержимое) будут перемещаться соответственно.

Answer 2

Я исправил это с помощью LayoutTransformer, предоставляемого в Silverlight Toolkit. Я обновил 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();
    }