Tuesday, 13 August 2013

Resizable TextBox in Expression Blend

Resizable TextBox in Expression Blend

How can I make a textbox that the user can resize with a resize grip?
Also, it is housed in a rectangle and the whole thing is in a grid. I'd
like to make the whole grid resizable.
I'd also like the grid to automatically resize from 1 line to 3 lines of
text once the textbox has focus:
Here's the code if you'd like to see an example of the control:
<Style x:Key="AddConvo" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid Height="30" Width="395">
<Path HorizontalAlignment="Stretch" Height="Auto"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"
StrokeLineJoin="Round" VerticalAlignment="Stretch"
Width="Auto" Data="M5.000001,5.0000013
L5.000001,22.000001 390,22.000001 390,5.0000013 z
M0.5,0.5 L394.5,0.5 394.5,26.500001 0.5,26.500001 z"
Stretch="Fill">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource
HolonBaseBackground}"/>
</Path.Fill>
<Path.Stroke>
<SolidColorBrush Color="{DynamicResource
FilterButtonsBorder}"/>
</Path.Stroke>
</Path>
<TextBox Height="20" TextWrapping="Wrap" Text="+CONVO"
Width="385" Margin="2" FontFamily="{DynamicResource
SystemText}" FontSize="{DynamicResource
GeneralTextSize}" FontWeight="Bold">
<TextBox.SelectionBrush>
<SolidColorBrush Color="{DynamicResource
HolonBaseBackground}"/>
</TextBox.SelectionBrush>
<TextBox.CaretBrush>
<SolidColorBrush Color="{DynamicResource
GeneralText}"/>
</TextBox.CaretBrush>
<TextBox.BorderBrush>
<SolidColorBrush Color="{DynamicResource
ScrollBarLine}"/>
</TextBox.BorderBrush>
<TextBox.Foreground>
<SolidColorBrush Color="{DynamicResource
SecondaryText}"/>
</TextBox.Foreground>
<TextBox.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF101010" Offset="0"/>
<GradientStop Color="#D8616161" Offset="1"/>
<GradientStop Color="#D8232323"
Offset="0.088"/>
<GradientStop Color="#D82C2C2C"
Offset="0.955"/>
</LinearGradientBrush>
</TextBox.Background>
</TextBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="30"/>
</Style>

No comments:

Post a Comment