silverlight 5开发【vb版】（11)- 样式与模板

deepfuture

浏览: 4400264 次
性别:
来自: 湛江

最近访客更多访客>>

linxl2011

mars36

jccz_zys

zkm0309

博主相关

博客

微博

相册

留言

关于我

博客专栏

: SQLite源码剖析
浏览量：80070

: WIN32汇编语言学习应用...
浏览量：70038

: 神奇的perl
浏览量：103344

: lucene等搜索引擎解析...
浏览量：285776

: 深入lucene3.5源码...
浏览量：15007

: VB.NET并行与分布式编...
浏览量：67553

: silverlight 5...
浏览量：32142

: 算法下午茶系列
浏览量：45986

文章分类

社区版块

存档分类

博客分类：

.net&silverlight

一、首先构造以下界面

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Button" Height="30" HorizontalAlignment="Left" Margin="145,179,0,0" Name="Button1" VerticalAlignment="Top" Width="127" />
        <StackPanel Height="83" HorizontalAlignment="Left" Margin="134,90,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="155">
            <TextBlock Height="23" Name="TextBlock1" Text="深未来图形按钮" FontFamily="Portable User Interface" />
            <Image Height="60" Name="Image1" Stretch="Fill" Width="155" Source="/SilverlightApplication3;component/Images/Tulips.jpg" />
        </StackPanel>
    </Grid>
</UserControl>

二、我们将除开button控件以外的东东全部放到button控件内

首先，将button的XAMl修改一下

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button  Height="102" HorizontalAlignment="Left" Margin="87,142,0,0" Name="Button1" VerticalAlignment="Top" Width="184">
            <Button.Content>
            </Button.Content>
        </Button>

                <StackPanel Height="83" HorizontalAlignment="Left" Margin="0,0,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="155">
                    <TextBlock Height="23" Name="TextBlock1" Text="深未来图形按钮" FontFamily="Portable User Interface" />
                    <Image Height="60" Name="Image1" Stretch="Fill" Width="155" Source="/SilverlightApplication3;component/Images/Tulips.jpg" />
                </StackPanel>
    </Grid>
</UserControl>

然后将StackPanel 的内容放到button来

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button  Height="102" HorizontalAlignment="Left" Margin="87,142,0,0" Name="Button1" VerticalAlignment="Top" Width="184">
            <Button.Content>
                <StackPanel Height="83" HorizontalAlignment="Left" Margin="0,0,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="155">
                    <TextBlock Height="23" Name="TextBlock1" Text="深未来图形按钮" FontFamily="Portable User Interface" />
                    <Image Height="60" Name="Image1" Stretch="Fill" Width="155" Source="/SilverlightApplication3;component/Images/Tulips.jpg" />
                </StackPanel>
            </Button.Content>
        </Button>

    </Grid>
</UserControl>

三、定义好样式与模板

    <UserControl.Resources>
        <Style x:Key="dpbutton" TargetType="Button" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        
                    </ControlTemplate>
                </Setter.Value>
            </Setter> 
        </Style>
    </UserControl.Resources>

然后将刚才的内容加入模板中

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <UserControl.Resources>
        <Style x:Key="dpbutton" TargetType="Button" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Button  Height="102" HorizontalAlignment="Left" Margin="78,31,0,0" Name="Button1" VerticalAlignment="Top" Width="184">
                            <Button.Content>
                                <StackPanel Height="83" HorizontalAlignment="Left" Margin="0,0,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="155">
                                    <TextBlock Height="23" Name="TextBlock1" Text="深未来图形按钮" FontFamily="Portable User Interface" />
                                    <Image Height="60" Name="Image1" Stretch="Fill" Width="155" Source="/SilverlightApplication3;component/Images/Tulips.jpg" />
                                </StackPanel>
                            </Button.Content>
                        </Button>
                    </ControlTemplate>
                </Setter.Value>
            </Setter> 
        </Style>
    </UserControl.Resources>

</UserControl>

四、应用样式和模板

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style x:Key="dpbutton" TargetType="Button" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Button  Height="102" HorizontalAlignment="Left" Margin="78,31,0,0" Name="Button1" VerticalAlignment="Top" Width="184">
                            <Button.Content>
                                <StackPanel Height="83" HorizontalAlignment="Left" Margin="0,0,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="155">
                                    <TextBlock Height="23" Name="TextBlock1" Text="深未来图形按钮" FontFamily="Portable User Interface" />
                                    <Image Height="60" Name="Image1" Stretch="Fill" Width="155" Source="/SilverlightApplication3;component/Images/Tulips.jpg" />
                                </StackPanel>
                            </Button.Content>
                        </Button>
                    </ControlTemplate>
                </Setter.Value>
            </Setter> 
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Style="{StaticResource dpbutton}" Height="141" HorizontalAlignment="Left" Margin="12,0,0,0" Name="Button1" VerticalAlignment="Top" Width="302" />
    </Grid>
</UserControl>

我们最后加入2个这样的图形button，看看效果

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <Style x:Key="dpbutton" TargetType="Button" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Button  Height="102" HorizontalAlignment="Left" Margin="78,31,0,0" Name="Button1" VerticalAlignment="Top" Width="184">
                            <Button.Content>
                                <StackPanel Height="83" HorizontalAlignment="Left" Margin="0,0,0,0" Name="StackPanel1" VerticalAlignment="Top" Width="155">
                                    <TextBlock Height="23" Name="TextBlock1" Text="深未来图形按钮" FontFamily="Portable User Interface" />
                                    <Image Height="60" Name="Image1" Stretch="Fill" Width="155" Source="/SilverlightApplication3;component/Images/Tulips.jpg" />
                                </StackPanel>
                            </Button.Content>
                        </Button>
                    </ControlTemplate>
                </Setter.Value>
            </Setter> 
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Style="{StaticResource dpbutton}" Height="148" HorizontalAlignment="Left" Margin="12,0,0,0" Name="Button1" VerticalAlignment="Top" Width="300" />
        <Button Height="148" HorizontalAlignment="Left" Margin="12,130,0,0" Name="Button2" Style="{StaticResource dpbutton}" VerticalAlignment="Top" Width="300" />
    </Grid>
</UserControl>