[RESOLVED] Imitate design of controls in attached image

[dee-u]

Anyone who can provide tips on how I can imitate the look and feel of the controls in the attached image? I am particulary interested with the label attached to the controls and the look of the Groupbox but as of now I have no clue where should I begin with.

TIA

[chris128]

You could just use a Border control with a Grid insider it to create the effect of the label being attached to the textbox/combobox controls. As for the groupbox, that is pretty easy as you can use whatever you like as the Header of the groupbox. So to get something like what is pictured there you could do this for example:

<GroupBox Margin="10" BorderBrush="DarkBlue">
<GroupBox.Header>
<Border CornerRadius="15" Background="#FF16458A">
<TextBlock Foreground="White" Padding="14,5,14,5" Text="Language" />
</Border>
</GroupBox.Header>
</GroupBox>

I'll put together an example of the other controls in a minute

[chris128]

Here's my quick mock up:

http://i135.photobucket.com/albums/q160/chriswright128/Imitation1.jpg

and when you click into the textbox:

http://i135.photobucket.com/albums/q160/chriswright128/Imitation2.jpg

XAML code attached to this post. I'm sure it could be done in a much better way and be made to be more re-usable as the way I have done it you would have to make an animation for every single one of those label/textbox combination controls for when they got focus. Hopefully it gives you some idea of how you could go about things though :)

[dee-u]

Cool, thanks a lot!

[chris128]

No worries :) oh and as for that little strip across the bottom with the horizontal gradient (that says something like "Name Of Contact Required") you could do something like this:

<Border Height="30">
<Border.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,0">
<GradientStop Color="#FF06356E" Offset="0"/>
<GradientStop Color="#FF629EE8" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel Margin="6,0,6,0" Orientation="Horizontal">
<Image Source="Images\info_24.png" Height="22"/>
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="6,0,0,0" Text="Name of Contact (Required)" />
</StackPanel>
</Border>