Hello Bobi Rekova,
thank you very much! YOU MADE MY DAY. Now, that's an approach I also understand from a "WinForms programmer view". In WinForms you also just inherit from controls and override oder extend the properties.
If you begin with XAML and read all the information you will find many style and template examples, but they never show how to extend them properly.
For everybody, who has the same problem, here is the code that works for me now. Of course, you have to change the namespaces, but the it should work
Here is the XAML Code for the Button Control:
<Button x:Class="SOLID.CustomControls.RolloverButtonControl"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
mc:Ignorable="d"
d:DesignHeight="50" d:DesignWidth="50">
<Grid x:Name="Layout" Background="White">
<Grid.Resources>
<Style x:Name="RolloverButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="RolloverButtonTemplate" TargetType="Button">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled" />
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image_mouseOver">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image_normal">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Image x:Name="Image_normal" Width="48" Height="48" Stretch="Fill" />
<Image x:Name="Image_mouseOver" Width="48" Height="48" Stretch="Fill" Visibility="Collapsed" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
</Grid>
</Button>
Here ist the code behind for the button control:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
namespace SOLID.CustomControls
{
public partial class RolloverButtonControl : Button
{
public RolloverButtonControl()
{
InitializeComponent();
this.Style = this.RolloverButtonStyle;
}
public String Image_normal { get; set;}
public String Image_mouseOver { get; set;}
Image _normalImage = new Image();
Image _mouseOverImage = new Image();
public override void OnApplyTemplate()
{
_normalImage = this.GetTemplateChild("Image_normal") as Image;
_normalImage.Source = new BitmapImage(new Uri(this.Image_normal, UriKind.RelativeOrAbsolute));
_mouseOverImage = this.GetTemplateChild("Image_mouseOver") as Image;
_mouseOverImage.Source = new BitmapImage(new Uri(this.Image_mouseOver, UriKind.RelativeOrAbsolute));
base.OnApplyTemplate();
}
}
}
And here is, how I use the control in XAML. Dont' forget to import the namespace, otherwise it won't work:
<cc:RolloverButtonControl Width="48" Height="48" Image_normal="Grafiken/Icons/48x48/Man.png" Image_mouseOver="Grafiken/Icons/48x48/Man_blue.png" Margin="108,21,0,0"/>
That's it. I think, this approach works best, because now I can customize the control with events and databinding features and all the other stuff that I need!
Thank you Bobi.....
Greetz, Michael, hamburg.