hello all, Is there a way to bind an image into a button so that the users sees an image and then the text. In the past I have done this using templates within the xaml however this time I have built the button using styles defined within a resource dictionary. I did this mainly because I wanted to content presenter text to change color when the toggle button was clicked and this seemed like the logical place to manage this. I found a tutorial at http://www.hardcodet.net/tag/image-button which explained the steps within a WPF application however within silverlight this does not seem to work. I think this may be due to the fact that SL does not support FrameworkPropertyMetadata only PropertyMetadata. within my resource dictionary I have the following style set for the button:
The only crucial lines are at the bottom where I use a textblock instead of a content presnter. This allows me to bind the parent object and adjust font propeties such as color which is what I needed to do ( font color white on unchekced state, font color black on checked state)
<Style x:Key="FilterToggleButton" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="toggleBtn_temp">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0" To="Checked"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Indeterminate"/>
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF06112D"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#F2D0B100"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FFB0C6FF"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FFFFEAB0"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FE60719C"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#F2FFEC93"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF06112D"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#F2E2B413"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0.983"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="Black"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FF2B3154"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FFD4CC72"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle">
<EasingColorKeyFrame KeyTime="0" Value="#FE7C82A1"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FEE7D169"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimation Duration="0:0:0.1" To="#FFE7DF00" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
<ColorAnimation Duration="0:0:0.1" To="#FFD4AF00" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Offset)" Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0" Value="0.51"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.509"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<Rectangle x:Name="rectangle" RadiusY="3.522" RadiusX="3.522">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF8186A5" Offset="0"/>
<GradientStop Color="#FF2B3154" Offset="1"/>
<GradientStop Color="#FE7C82A1" Offset="0.431"/>
<GradientStop Color="#FF2B3154" Offset="0.513"/>
</LinearGradientBrush>
</Rectangle.Stroke>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF06112D" Offset="0"/>
<GradientStop Color="#FF90A3D4" Offset="0.474"/>
<GradientStop Color="#FF06112D" Offset="0.983"/>
<GradientStop Color="#FE60719C" Offset="0.51"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="rectangle1" Margin="1" RadiusY="2.792" RadiusX="2.792" StrokeThickness="0.5">
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDEDEE0" Offset="0"/>
<GradientStop Color="#FF7B83B6" Offset="1"/>
<GradientStop Color="#FFDEDEE0" Offset="0.384"/>
<GradientStop Color="#FF7B83B6" Offset="0.599"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<TextBlock FontFamily="Arial" Cursor="Hand" HorizontalAlignment="Right" Width="Auto" Text="{TemplateBinding Content}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" x:Name="textBlock" Foreground="White" Margin="0,0,13,0" d:LayoutOverrides="HorizontalAlignment" TextAlignment="Right" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="3" BlurRadius="8" Opacity="0.26"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then created a new cs file and droped in my viewModel directory which contained the following:
public class Toggleimagehelper
{
public static readonly DependencyProperty ImageProperty;
public static ImageSource GetImage(DependencyObject obj)
{
return (ImageSource)obj.GetValue(ImageProperty);
}
public static void SetImage(DependencyObject obj, ImageSource value)
{
obj.SetValue(ImageProperty, value);
}
static Toggleimagehelper()
{
var metadata = new PropertyMetadata((ImageSource) null);
ImageProperty = DependencyProperty.RegisterAttached("Image", typeof(ImageSource), typeof(Toggleimagehelper), metadata);
}
}
The difference I found when working through the tutorial and in reading a little I discovred that SL does not support FrameworkPropertyMetadata instead I used PropertyMetadata ( Right wrong ? It seems correct based upon the properties of the method)
And finaly once I registered the class in the xaml ui I call/attach the property within the toggle button by:
<ToggleButton local:Toggleimagehelper.Image="/DataSelectionWin;component/Images/refresh.png" Content="Button" HorizontalAlignment="Left" Margin="9,8,0,8" Style="{StaticResource FilterToggleButton}" Width="78"/>
When I run this I don't receive any xaml exception errors or runtime errors. I know the property is properly registered because I can see it in the VS properties window for Toggle Button and I can even navigate to the images I want to use. Any insight on what I have missed or may be overlooking would be appreciated.
Thank you