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>