tags:

views:

9

answers:

0

I have a rounded-corners button that I want to have a dynamically resizable width (static height) without changing the corner curvature. I'm trying a take on the sliding doors technique: an image for the left and right sides of the button, and a very long middle image. But I can't figure out how to make the middle image resize to only the width required by the text in the middle. Here's my code:

        <Grid UseLayoutRounding="True" Height="73">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Image Grid.Column="0" Source="/Images/orange_button_medium_left.png" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill"/>
            <Image Grid.Column="1" Source="/Images/orange_button_medium_middle.png" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill"  StretchDirection="DownOnly" ClipToBounds="False" SnapsToDevicePixels="False" />
            <Image Grid.Column="2" Source="/Images/orange_button_medium_right.png" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill" />

            <Label Grid.Column="1" VerticalAlignment="Center">I'm Good</Label>


        </Grid>