Silverlight Styling

10-10-2008

Silverlight has a powerful model to customize the look and feel of controls.

 

For example, you can alter the looks of a Button control by not supplying just a text for its content property, but an elipse with text in it. That way, the button will not be rendered as a default button, but use your own supplied style.

 

To be able to easily reuse your custom template, you can define a style in the App.xaml and manually set the style property on the button control. This works similar like CSS.

 

Example template to show the content of a button as an image (App.xaml):

<Style x:Key="ImageButtonStyle" TargetType="Button">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Button">

                        <Grid>

                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">

                                <ContentPresenter.Content>

                                    <Image Source="{TemplateBinding Content}"></Image>

                                </ContentPresenter.Content>

                            </ContentPresenter>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

 You can set the style on your button this way:
<Button Style="{StaticResource ImageButtonStyle}" Content="Img.png">

 

Comments


No comments yet.

New Comment

Name
E-mail (not published)
Comment
Enter the code shown: