WPF UserControl Taille dynamique/Dock/Anchor & StoryBoard

Question

Je cherche des conseils sur la création d'un UserControl WPF.

Mon objectif est de créer une barre de progression indéterminée, qui glisse une image d'avant en arrière. Je voudrais pouvoir ancrer les bords gauche et droit de ce contrôle utilisateur sur les côtés de la fenêtre, donc si l'utilisateur redimensionne la fenêtre, la largeur de la barre de progression est également augmentée. Je me fiche de la hauteur, ça peut être constant.

Voici ce que j'ai, cela fonctionne très bien sauf quand j'ajoute le contrôle au formulaire, je ne peux pas définir les options d'ancrage, et je ne peux pas imaginer comment animer le storyboard pour utiliser toute la largeur de la commande usercontrol.

<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

Remplacez votre animation TranslateTransform.X avec ceci:

<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"/> 

Comme vous pouvez voir le vrai truc est la liaison; Je lie la propriété To à ActualWidth UserControl. Le même concept peut être appliqué à vos autres animations, même en utilisant KeyFrames (bien que je ne trouve pas de KeyFrames est un peu plus facile).

Quant à la « accueil » Je pense que ce que vous recherchez est l'

HorizontalAlignment="Stretch" 

Cela fera de votre commande pour remplir toute la largeur elle est donnée.

Answer 2

L'ancrage ne fonctionnera pas car vous avez codé en dur la taille Min/Max dans le contrôle. Cela ne joue pas bien avec l'amarrage. Et cela est lié à l'animation codée en dur, voir @ réponse de Charlie. Donc, utilisez uniquement la contrainte de taille qui est vraiment nécessaire, comme dans ce cas peut-être un MinHeight et MinWidth, mais laissez le reste ouvert.