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

程序员文章站 2022-03-02 11:46:18

...

一、首先构造以下界面

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

博客分类： .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>

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

博客分类： .net&silverlight

三、定义好样式与模板

    <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>

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

博客分类： .net&silverlight

查看图片附件

上一篇： wordpress 移除后台某些选项卡及后台adminbar的 dashboard选项

下一篇： wordpress post 文章/文章标题列表等分页实现

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

silverlight 5开发【vb版】（6)-鼠标滚轮事件

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

silverlight 5开发【vb版】（12)-数据和RIA基础(2)

silverlight 5开发【vb版】（7)-silverlight 5开发工具包ISO

silverlight 5开发【vb版】（12)-数据和RIA基础(1)

silverlight 5开发【vb版】（5)-鼠标左右键事件

silverlight 5开发【vb版】（3）-简单鼠标事件处理

silverlight 5开发【vb版】（4）-容器

silverlight 5开发【vb版】（10)- 布局控件

silverlight 5开发【vb版】（3）-简单鼠标事件处理