Silverlight中ImageButton的简单实现
在应用中button看起来有点单调，想做一个类似于Winform里面的ToolStripButton，可以设置图片跟文本的。单独的按钮很好做：
1: <Button Height="60" Tag="111" Width="68" Canvas.Left="72" Canvas.Top="172" >
2: <Button.Content>
3: <Grid>
4: <Grid.RowDefinitions>
5: <RowDefinition></RowDefinition>
6: <RowDefinition ></RowDefinition>
7: </Grid.RowDefinitions>
8: <Image Source="image/add.png" Grid.Row="0"></Image>
9: <TextBlock Text="Add" Grid.Row="1" VerticalAlignment="Center" ></TextBlock>
10: </Grid>
11: </Button.Content>
12: </Button>
或者刷子应该也可以.但如果有多个按钮就要反复设置content属性，有点麻烦…而且如果以后想改变一下图片跟文本的排列方式也不方便。所以最好是定义style或者template之类或者重写一个button定义一个imagesource属性…
我想弄简单点就自定义style，用blend查看button的原来样式：
1: <Style x:Key="ButtonStyle1" TargetType="Button">
2: <Setter Property="Background" Value="#FF1F3B53"/>
3: <Setter Property="Foreground" Value="#FF000000"/>
4: <Setter Property="Padding" Value="3"/>
5: <Setter Property="BorderThickness" Value="1"/>
6: <Setter Property="BorderBrush">
7: <Setter.Value>
8: <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
9: <GradientStop Color="#FFA3AEB9" Offset="0"/>
10: <GradientStop Color="#FF8399A9" Offset="0.375"/>
11: <GradientStop Color="#FF718597" Offset="0.375"/>
12: <GradientStop Color="#FF617584" Offset="1"/>
13: </LinearGradientBrush>
14: </Setter.Value>
15: </Setter>
16: <Setter Property="Template">
17: <Setter.Value>
18: <ControlTemplate TargetType="Button">
19: <Grid>
20: <vsm:VisualStateManager.VisualStateGroups>
21: <vsm:VisualStateGroup x:Name="CommonStates">
22: <vsm:VisualState x:Name="Normal"/>
23: <vsm:VisualState x:Name="MouseOver">
24: <Storyboard>
25: <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
26: <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
27: </DoubleAnimationUsingKeyFrames>
28: <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
29: <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
30: </ColorAnimationUsingKeyFrames>
31: <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
32: <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
33: </ColorAnimationUsingKeyFrames>
34: <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
35: <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
36: </ColorAnimationUsingKeyFrames>
37: </Storyboard>
38: </vsm:VisualState>
39: <vsm:VisualState x:Name="Pressed">
40: <Storyboard>
41: <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
42: <SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>
43: </ColorAnimationUsingKeyFrames>
44: <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity">
45: <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
46: </DoubleAnimationUsingKeyFrames>
47: <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
48: <SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/>
49: </ColorAnimationUsingKeyFrames>
50: <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
51: <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
52: </ColorAnimationUsingKeyFrames>
53: <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
54: <SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/>
55: </ColorAnimationUsingKeyFrames>
56: <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
57: <SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>
58: </ColorAnimationUsingKeyFrames>
59: </Storyboard>
60: </vsm:VisualState>
61: <vsm:VisualState x:Name="Disabled">
62: <Storyboard>
63: <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
64: <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
65: </DoubleAnimationUsingKeyFrames>
66: </Storyboard>
67: </vsm:VisualState>
68: </vsm:VisualStateGroup>
69: <vsm:VisualStateGroup x:Name="FocusStates">
70: <vsm:VisualState x:Name="Focused">
71: <Storyboard>
72: <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
73: <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
74: </DoubleAnimationUsingKeyFrames>
75: </Storyboard>
76: </vsm:VisualState>
77: <vsm:VisualState x:Name="Unfocused"/>
78: </vsm:VisualStateGroup>
79: </vsm:VisualStateManager.VisualStateGroups>
80: <Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
81: <Grid Margin="1" Background="{TemplateBinding Background}">
82: <Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/>
83: <Rectangle x:Name="BackgroundGradient" >
84: <Rectangle.Fill>
85: <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
86: <GradientStop Color="#FFFFFFFF" Offset="0"/>
87: <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
88: <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
89: <GradientStop Color="#C6FFFFFF" Offset="1"/>
90: </LinearGradientBrush>
91: </Rectangle.Fill>
92: </Rectangle>
93: </Grid>
94: </Border>
95: <Grid>
96: <Grid.RowDefinitions>
97: <RowDefinition Height="50"></RowDefinition>
98: <RowDefinition></RowDefinition>
99: </Grid.RowDefinitions>
100: <Image Source="{TemplateBinding Content}" Grid.Row="0" Margin="0 10 0 0" ></Image>
101: <ContentPresenter Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Tag}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
102: </Grid>
103: <Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF"/>
104: <Rectangle Margin="1" x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" RadiusX="2" RadiusY="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
105: </Grid>
106: </ControlTemplate>
107: </Setter.Value>
108: </Setter>
109: </Style>
第96行到100行是 我修改的地方，
1: <Grid>
2: <Grid.RowDefinitions>
3: <RowDefinition Height="50"></RowDefinition>
4: <RowDefinition></RowDefinition>
5: </Grid.RowDefinitions>
6: <Image Source="{TemplateBinding Content}" Grid.Row="0" Margin="0 10 0 0" ></Image>
7: <ContentPresenter Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Tag}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
8: </Grid>
可以看到是加了一个Grid，然后放一个image控件，source属性是绑定的Content属性，大家可能会问那文本不也变成图片地址了吗？呵呵，这里就变通了一下，原来的ContentPresenter控件的Content属性是用来设置文本的，现在我用Tag来绑定，所以这里有点点不方便的就是Button的属性设置:(Style就是上面的自定义的Style)
1: <Button Height="80" Tag="Add" Content="image/add.png" Style="{StaticResource btn}"/>
效果跟上面的一样。
(我最开始是想用Tag绑定Image的Source属性，结果绑定不上去，所以用Content去绑定了，当然这里的方法有点觉得怪怪的，不过最节约时间。)
最后源码下载：https://files.cnblogs.com/mingzhe/Silverlight_ImageButton.rar
