WPF UserControl - Command definieren

[GinoBambino]

Ich habe mit Expression Blend ein UserControl erzeugt. Das Control definiert für einen Button ein neues ControlTemplate. Auf diese Weise erhält der Button den Look eines Zurück-Buttons.

Leider kann ich dem Button kein Command zuweisen, da eine entsprechende Command-Property fehlt. Ich weiß leider nicht, wie ich sie definieren kann (dasselbe gilt auch für weitere Properties wie Width und Height).

Könnte mir einer einen Tipp geben, wie ich die verschiedenen Properties in meinem UserControl veröffentlichen kann?

Hier ist mein Code:

<UserControl
	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"
	x:Class="NavigationBackButton"
	x:Name="NavigationBackButton"
	d:DesignWidth="50" d:DesignHeight="50">
    <UserControl.CommandBindings>
        
    </UserControl.CommandBindings>
    <UserControl.Resources>
        <Storyboard x:Key="MouseEnterStoryboard">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                <EasingColorKeyFrame KeyTime="0" Value="Black"/>
            </ColorAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="MouseLeftButtonDownStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0" Value="0.795"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
                <EasingColorKeyFrame KeyTime="0" Value="#FF2C2C2C"/>
            </ColorAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(Brush.Opacity)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

        <Button IsHitTestVisible="True">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <ControlTemplate.Resources>
                                    <Storyboard x:Key="MouseEnterStoryboard">
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ellipse">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF6F7176"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <Storyboard x:Key="MouseLeftButtonDownStoryboard">
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="ellipse">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF6E7991"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="ellipse">
                                            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="path">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FF6E7991"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </ControlTemplate.Resources>
                                <Grid x:Name="grid" Background="Transparent">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="2*"/>
                                        <RowDefinition Height="3*"/>
                                    </Grid.RowDefinitions>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="ValidationStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0">
                                                    <VisualTransition.GeneratedEasingFunction>
                                                        <BounceEase EasingMode="EaseOut"/>
                                                    </VisualTransition.GeneratedEasingFunction>
                                                </VisualTransition>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Valid"/>
                                            <VisualState x:Name="InvalidFocused"/>
                                            <VisualState x:Name="InvalidUnfocused"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Ellipse x:Name="ellipse" Width="50" Height="50" Opacity="1" StrokeThickness="1" Stroke="#FF9B9B9B" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2">
                                        <Ellipse.Fill>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="White" Offset="1"/>
                                                <GradientStop Color="White"/>
                                                <GradientStop Color="#FFDEDEDE" Offset="0.5"/>
                                                <GradientStop Color="#FFA4A4A4" Offset="0.504"/>
                                            </LinearGradientBrush>
                                        </Ellipse.Fill>
                                        <Ellipse.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </Ellipse.RenderTransform>
                                    </Ellipse>
                                    <Path x:Name="path" Data="M10,3 L10,8 20,8 20,12 10,12 10,17 0,10 z" Height="20" Width="20" Fill="White" RenderTransformOrigin="0.5,0.5" Opacity="0.995" Margin="15" Grid.RowSpan="2" StrokeThickness="0.5">
                                        <Path.Stroke>
                                            <SolidColorBrush Color="#FF5B5B5B" Opacity="0.595"/>
                                        </Path.Stroke>
                                        <Path.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="1.75" ScaleY="2"/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </Path.RenderTransform>
                                    </Path>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
                                        <StopStoryboard BeginStoryboardName="MouseLeftButtonDownStoryboard_BeginStoryboard"/>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                        <StopStoryboard BeginStoryboardName="MouseEnterStoryboard_BeginStoryboard"/>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
                                        <BeginStoryboard x:Name="MouseLeftButtonDownStoryboard_BeginStoryboard" Storyboard="{StaticResource MouseLeftButtonDownStoryboard}"/>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                        <BeginStoryboard x:Name="MouseEnterStoryboard_BeginStoryboard" Storyboard="{StaticResource MouseEnterStoryboard}"/>
                                    </EventTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
</UserControl>

 

[holy]

Was du da gemacht hast, ist leider der falsche Ansatz
Ein UserControl ist nunmal kein Button, von daher gibt es auch kein Command-Property.
Du möchtest eigentlich den Style inkl. ControlTemplate eines Buttons bearbeiten.
Da du eh mit Blend arbeitest, kannst du den Style einfach "extrahieren" und deinen Bedürfnissen anpassen.

Edit.
Jetzt wo ich gerade dein XAML sehe. Du hast den Style doch schon Wieso packst du das ganze in ein UserControl? Erstell einen Style als Resource(-Datei) und wende den einfach auf jeden Button, der so aussehen soll, an.

 

[GinoBambino]

Hi holy.

Auf die von dir vorgeschlagene Lösung bin ich vorhin auf der Arbeit von selbst gekommen. Ich habe schon seit längerem nicht mehr direkt mit der WPF gearbeitet, sodass meine WPF-Kenntnisse ein wenig eingerostet sind. Mein Ansatz war der, den Button in ein separates Control auszulagern, sodass er direkt im ViewModel instanziiert werden kann. Offensichtlich ist dies jedoch mit dem Nachteil verknüpft, dass man dann keine Command-Property zur Verfügung stehen hat (eine Command-Property wird schließlich von einem FrameworkElement bereitgestellt).

Gut, dann mache ich es weiterhin so wie du es vorgeschlagen hast Vielen Dank für die Hilfe.