Page view counter
rounded corner, textbox, button, dropdown etc. Subscribe to this thread
Last post 01-08-2009 11:52 AM by MoHassan. 5 replies.
Sort Posts:
01-08-2009 10:10 AM
rounded corner, textbox, button, dropdown etc.

how can i set the rounded corner look for different components in silvelright 2, i.e text box, button, drop down... ???

joji777

Loading...
Joined on 09-28-2007
Posts 181
01-08-2009 10:16 AM
Re: rounded corner, textbox, button, dropdown etc.

Just about every SL control allows you to customize the default look & feel via templates.  There are some videos on this website in the 'Learn' section that demonstrate this technique (on a button control I think).  It will help to do this type of customization, if you also are using Expression Blend (in my opinion) because much of the templating work is design work.

Thanks,
Beer John
myOSity Project Website, Blog

prujohn

Loading...
Joined on 04-06-2007
Texas
Posts 489
01-08-2009 10:38 AM
Re: rounded corner, textbox, button, dropdown etc.

could you please refer me to exact video, i have seen some, but could not find what i am looking for.

joji777

Loading...
Joined on 09-28-2007
Posts 181
01-08-2009 10:51 AM
Re: rounded corner, textbox, button, dropdown etc.
MoHassan

Loading...
Joined on 03-03-2008
Colorado Springs, CO.
Posts 107
01-08-2009 10:55 AM
Re: rounded corner, textbox, button, dropdown etc.

i already visited "controls" videos, i could not find the video which shows how to round the corners of textbox or butoon, etc. although i found one video in which he showed to create a rectangle with rounded cornerns and create a textbox inside it wityh no border, which is not a nice a way to achieve this, is there any better way. ?????

joji777

Loading...
Joined on 09-28-2007
Posts 181
01-08-2009 11:52 AM
Marked as Answer
Re: rounded corner, textbox, button, dropdown etc.

First you have to crerate TextBox:

<TextBox Text=""  FontSize="14"

FontFamily="Comic Sans MS" VerticalAlignment="Top"

x:Name="Nametxt" BorderThickness="1,1,1,1" Background="{x:Null}"

Style="{StaticResource TextBoxStyle}" Foreground="#FFFFFFFF" BorderBrush="{x:Null}" Margin="0,5,0,5" HorizontalContentAlignment="Right" Grid.ColumnSpan="1" Grid.Column="1" HorizontalAlignment="Stretch" Width="Auto"/>

And then you need to create TextBoxStyle that will target TextBox inside the Page.XAML or App.XAML.

<Style x:Key="TextBoxStyle" TargetType="TextBox">

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Background" Value="#FFFFFFFF"/>

<Setter Property="Foreground" Value="#FF000000"/>

<Setter Property="Padding" Value="2"/>

<Setter Property="BorderBrush">

<Setter.Value>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFA3AEB9" Offset="0"/>

<GradientStop Color="#FF8399A9" Offset="0.375"/>

<GradientStop Color="#FF718597" Offset="0.375"/>

<GradientStop Color="#FF617584" Offset="1"/>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="TextBox">

<Grid x:Name="RootElement">

<Border x:Name="Border" Opacity="1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5,5,5,5" BorderBrush="#4C00FFF1" Background="#FF606060">

<ScrollViewer Height="Auto" x:Name="ContentElement" Width="Auto" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalAlignment="Top" Margin="5,5,5,5"/>

</Border>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

 

Good Luck

MoHassan

Loading...
Joined on 03-03-2008
Colorado Springs, CO.
Posts 107
Microsoft Communities