WPF UserControl Dynamische Größe/Dock/Anchor & StoryBoard

Question

Ich suche nach einer Anleitung zum Erstellen eines WPF UserControl.

Mein Ziel ist es, einen unbestimmten Fortschrittsbalken zu erstellen, der ein Bild vor und zurück verschiebt. Ich möchte in der Lage sein, die linken und rechten Kanten dieses Benutzersteuerelements an die Seiten des Fensters anzudocken. Wenn der Benutzer die Größe des Fensters ändert, wird die Breite des Fortschrittsbalkens ebenfalls erhöht. Die Höhe ist mir egal, das kann konstant sein.

Hier ist, was ich habe, funktioniert es großartig, außer wenn ich das Steuerelement zum Formular hinzufügen, kann ich nicht die Docking-Optionen festlegen, und ich kann nicht herausfinden, wie das Storyboard animieren, die volle Breite des Benutzersteuerelements zu verwenden.

<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="WPFStyle.PGBProgress" 
    x:Name="MotionProgressBar" Width="550" Margin="5" Height="100" MinWidth="550" MinHeight="100" MaxWidth="550" MaxHeight="100"> 
    <UserControl.Resources> 
     <Storyboard x:Key="Motion" AutoReverse="True" RepeatBehavior="Forever"> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:01" Value="127"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:02" Value="242"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:03" Value="342"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:04" Value="433"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:07" Value="433"/> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:03" Value="0"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:04" Value="-2"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:07" Value="-2"/> 
      </DoubleAnimationUsingKeyFrames> 
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 
       <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:01" Value="89.705"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:02" Value="179.29"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:03" Value="270.032"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:04" Value="362.902"/> 
       <SplineDoubleKeyFrame KeyTime="00:00:07" Value="717.969"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </UserControl.Resources> 
    <UserControl.Triggers> 
     <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
      <BeginStoryboard Storyboard="{StaticResource Motion}"/> 
     </EventTrigger> 
    </UserControl.Triggers> 

    <Grid x:Name="LayoutRoot"> 
     <Image x:Name="image" HorizontalAlignment="Left" Width="85.622" Source="image.png" Stretch="Fill" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0"> 
      <Image.RenderTransform> 
       <TransformGroup> 
        <ScaleTransform/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform/> 
       </TransformGroup> 
      </Image.RenderTransform> 
     </Image> 
    </Grid> 
</UserControl> 

Answer 1

Ersetzen Sie Ihre TranslateTransform.X Animation mit diesem:

<DoubleAnimation Storyboard.TargetName="image" 
       Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" 
       From="0" 
       To="{Binding ElementName=MotionProgressBar, Path=ActualWidth}" 
       Duration="0:0:7"/> 

Wie Sie der eigentliche Trick sehen kann, ist die Bindung; Ich binde die Eigenschaft To an die UserControl ActualWidth. Das gleiche Konzept kann auf Ihre anderen Animationen angewendet werden, sogar mit KeyFrames (obwohl ich finde, dass KeyFrames nicht einfacher ist).

Wie für die „Andocken“ Ich denke, was Sie suchen,

ist

HorizontalAlignment="Stretch" 

die Ihre Kontrolle zu füllen ganze Breite ist es gegeben, verursacht.

Answer 2

Das Andocken funktioniert nicht, weil Sie die Min/Max-Größe fest in das Steuerelement codiert haben. Das funktioniert beim Andocken nicht gut. Und das hängt mit der fest programmierten Animation zusammen, siehe @ Charlies Antwort.

Verwenden Sie also nur Größenbeschränkungen, die wirklich notwendig sind, wie in diesem Fall vielleicht eine MinHeight und MinWidth, aber lassen Sie den Rest offen.