XAML grid column resizing when contents are scaled

Is it possible to automatically resize a grid column in XAML when its contents are scaled?

Below are two screenshots to better explain what I mean. When the UserControl is first displayed it looks like:

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

The intention is that the white rounded rectangle (with the textblock, combobox and slider) should always be positioned off to the right of the grey rectangle. However, when the grey rectangle is scaled up from the code behind, the grid column width does not increase to accomodate this and creates the overlap as seen below.

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

Is there some way to make this column change width automatically to fit the controls inside from XAML?

My XAML currently looks like:

<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"
        HorizontalAli开发者_开发知识库gnment="Right"
        Grid.Column="1" />
</Grid>

Note: This is in Silverlight.

---

In Silverlight the approach would be to give the row and column definitions which define the cell a specific Height and Width respectively. Set the gray rectangle to Stretch to fill the cell. Now you can modify the Width and Height properties of the definitions and the other cells (and their contents) will move accordingly.

---

I fixed this by using the LayoutTransformer provided in the Silverlight Toolkit. I upated placed the XAML to be scaled inside the layout transformer tags as can be seen here:

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

In the code behind I got rid of my RenderTransform and added an event that would fire when the scale should change. The handler looks like:

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