SilverLight自定义ImageButton

SilverLight中XAML的写法和WPF一样，但是发现在自定义按钮上，没有WPF来的容易，下面说说我制作SilverLight中的ImageButton的一些思路。

在SilverLight中，我们可以利用Button的Content属性来承载多个元素。然后通过stackPanel来包容图片和文本：

       <Button x:Name="AddUserButton" Width="150" Margin="32,140,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <TextBlock Text="Add User" Margin="10,0,0,0" />
                </StackPanel>
            </Button.Content>
        </Button>
        <Button x:Name="EditUserButton" Width="150" Margin="32,82,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                <Image Source="Images/eqrth.png" Width="16" Height="16" />
                <TextBlock Text="Edit User" Margin="10,0,0,0" />
                </StackPanel>
            </Button.Content>
        </Button>
        <Button x:Name="DeleteUserButton" Width="150" Margin="32,26,0,0" Height="38" VerticalAlignment="Top" HorizontalAlignment="Left" d:LayoutOverrides="Width">
            <Button.Content>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <TextBlock Text="Delete User" Margin="10,0,0,0" />
                </StackPanel>
            </Button.Content>
        </Button>

这样，我们就能够得到想要的效果，图片可以通过重设Image的Source属性来变换。

但是如果我们项目中很多地方用到了这个配置文件的话，那么我们最好把它放到资源文件中，然后引用即可：

首先，创建一个ResourceDictionary页面。

然后，将样式写入进去：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 应该在此定义资源字典条目。-->
    
    <Style x:Key="AddButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="150" />
        <Setter Property="Margin" Value="0,0,0,10" />
        <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="DeleteButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="150" />
        <Setter Property="Margin" Value="0,0,0,10" />
        <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="EditButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="150" />
        <Setter Property="Margin" Value="0,0,0,10" />
        <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/eqrth.png" Width="16" Height="16" />
                    <ContentPresenter Content="{Binding}" Margin="10,0,0,0" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

这里需要注意的是，每一个Style必须分配X:key属性，并且属性ID唯一。

最后，在前端页面，我们可以这样使用：

先引入样式资源：

<UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourceDictionary1.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

然后Apply上样式即可：

 

    <Button HorizontalAlignment="Left" Margin="32,0,0,160"
         VerticalAlignment="Bottom" 
         Width="152" 
         Content="添加用户信息"
         Style="{StaticResource AddButtonStyle}" Height="40" RenderTransformOrigin="-2,0.2"
         />