none
WPF : Alignement après un storyboard RRS feed

  • Question

  • Bonjour à tous,

    Je suis un tout nouvel utilisateur de WPF. Je suis en train de créer une application qui utilise quelques nouveaux principes de WPF, notamment les storyboards. En effet, pour simplifier, j'ai deux éléments principaux :
    • Le premier, qui prend tout le bas de la fenêtre
    • Le deuxième qui est placé en haut à droite
    En gros, ça donne ces deux zones là :
    http://img100.imageshack.us/my.php?image=exemplefenetreqi4.png

    Dans cette position, qui est la position initiale, la première zone, qui est un scrollviewer, est attachée sur les 4 côtés. La seconde, qui est un canvas, est attachée en haut et à droite.

    Là où ça devient compliqué, c'est qu'à travers un storyboard, j'échange leur place lors d'un clic sur le canvas. Ils échangent donc de place et réévalue leur taille.

    Mon souci est qu'après ce storyboard, le canvas reste attaché en haut et à droite et le scrollviewer reste attaché partout, alors que je souhaiterais qu'ils échangent complètement de comportement.

    Je souhaite, en effet, lors d'un redimensionnement de la fenêtre que :
    • le contrôle en bas aie un comportement de scrollviewer (ne pas bouger, ne pas se redimensionner, avoir des scrollbar)
    • le contrôle en haut à droite, ne change pas de taille, mais simplement qu'il suive le redimensionnement de la fenêtre en restant attaché en haut et à droite.
    J'espère avoir été clair dans mes explications, même si j'en doute fortement. Si quelqu'un avait la moindre idée, car j'ai l'impression d'avoir tout essayer (le changement d'alignement, le changement de margin, ...)

    Merci de votre aide...

    PS : Petite précision, je ne peux pas changer les contrôle. Ils doivent rester un scrollviewer pour la partie initialement en bas, et un canvas pour la partie initialement en haut à droite.

     

    jeudi 15 mai 2008 13:56

Toutes les réponses

  • Bonjour,

     

    bon j'ai pas encore joué avec ça (oula la va peut être bien falloir que je m'y mette sérieusement à WPF) mais en regardant par ici:

    http://romagny13.over-blog.com/article-10327102.html et surtout ici : http://msdn.microsoft.com/en-us/library/ms742868.aspx

     

    il semblerait que le storyboard t'aide à setter différente propriétés hors l'attachement en est une (Dock). Il me semblerait logique que tu complètes ton storyboard en settant la property Dock (qui est lié à l'objet).

     

    J'espère que ça te suffira.

     

     

    jeudi 15 mai 2008 14:34
  • Re,

     

    Alors le souci n'est pas réellement dans le fait de changer l'attachement. Cette opération, je sais la réaliser, même par le code C#.


    C'est surtout, qu'une fois le changement d'attachement réaliser, lorsque je redimensionne la fenêtre, ça ne change rien. Il reste attaché, et bouge, comme au départ.

     

    Je ne sais pas si j'arrive à bien me faire comprendre.

     

    Je t'avoue, que j'y ai passé des journées entières dessus, à essayer différentes méthodes, et là j'ai l'impression d'avoir tout essayé et que ce n'est pas réalisable.

     

    Merci pour ton aide ...

    jeudi 15 mai 2008 14:47
  • C'est pas un problème avec la propriété Anchor? Mais c'est sous toutes réserves....

     

    jeudi 15 mai 2008 15:18
    Modérateur
  • Re,

     

    La propriété Anchor n'est pas définie (ou accessible ou autre...) pour le canvas et le scrollviewer...

     

    Merci quand même  

    jeudi 15 mai 2008 15:23
  • Bonjour,

    Voila un petit exemple de layout qui vous aidera je l'espère :

     

    Code Snippet

    XAML

     

    <Window x:Class="WpfApplication3.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="325" Width="593">
        <DockPanel Name="dpRoot">
            <StackPanel DockPanel.Dock="Top" Name="stackPanel1" HorizontalAlignment="Right">
                <Button Content="Switch" Width="50" Click="Button_Click" />
            </StackPanel>
            <DockPanel DockPanel.Dock="Top" Name="dockPanel2" Background="Blue">
                <Grid Name="gContainer" DockPanel.Dock="Right" Width="50">
                    <Canvas Name="cvs" Background="Red"/>
                </Grid>
                <Rectangle Height="50" Fill="Yellow"/>
            </DockPanel>
            <ScrollViewer Name="sv" Background="Green"/>
        </DockPanel>
    </Window>

     

    CODE

     

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        UIElement dockElement = this.sv;
        UIElement gridElement = this.cvs;
        if (!this.dpRoot.Children.Contains(this.sv))
        {
            dockElement = this.cvs;
            gridElement = this.sv;
        }

     

        this.dpRoot.Children.Remove(dockElement);
        this.gContainer.Children.Add(dockElement);

     

        this.gContainer.Children.Remove(gridElement);
        this.dpRoot.Children.Add(gridElement);
    }

     

     

    Lorsque vous cliquez sur le bouton l'emplacement du Canvas et du ScrollView sont interverti. Si vous changer la taille de la fenètre, c'est la partie basse qui change de taille.
    vendredi 16 mai 2008 05:54
  • Yop,

     

    Pourrais tu publier le code que tu utilises pour faire ce switch ? Je ne vois pas comment tu l'as réaliser (je voudrais essayer de reproduire ton problème et voir si je trouve une solution)

     

    Merci

    vendredi 16 mai 2008 06:55
  • Tout d'abord, merci à tous pour vos réponses. Ca fait plaisir de voir que vous vous sentez concernés par les problèmes de tous.

     

    Je vais vous joindre les morceaux de code qui pourront, je l'espère, vous aider.

     

    Le premier, c'est la définition de la partie en haut à droite (navigationCanvas) :

     

    Code Snippet

    <Canvas HorizontalAlignment="Right" Margin="0,35,15,0" x:Name="navigationCanvas" VerticalAlignment="Top" Width="90" Height="90" RenderTransformOrigin="0.5,0.5" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
             <Canvas.RenderTransform>
              <TransformGroup>
               <ScaleTransform ScaleX="1" ScaleY="1"/>
               <SkewTransform AngleX="0" AngleY="0"/>
               <RotateTransform Angle="0"/>
               <TranslateTransform X="0" Y="0"/>
              </TransformGroup>
             </Canvas.RenderTransform>
              <Grid Width="90" Height="90" x:Name="littleGrid" RenderTransformOrigin="0.5,0.5" ScrollViewer.HorizontalScrollBarVisibility="Visible" Background="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right">
               <Grid.RenderTransform>
                <TransformGroup>
                 <ScaleTransform ScaleX="1" ScaleY="1"/>
                 <SkewTransform AngleX="0" AngleY="0"/>
                 <RotateTransform Angle="0"/>
                 <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
               </Grid.RenderTransform>
               <Rectangle Fill="#FF000000" Stroke="{x:Null}" Opacity="0" x:Name="littleRectangle" Panel.ZIndex="1" RadiusY="0" RadiusX="0" PreviewMouseUp="littleRectangle_PreviewMouseUp"/>
               <ItemsControl
                Panel.ZIndex="-1"
                x:Name="itemControl"
                ItemsSource="{StaticResource navigationDataSource}"
                ItemTemplate="{StaticResource navigationDataTemplate}"
                            Foreground="#FF000000" Opacity="1" Background="{x:Null}" Visibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <controls:ElementFlow x:Name="elementFlowx"                
                   VerticalAlignment="Center"
                   ElementWidth="400"
                   ElementHeight="300"
                   UseReflection="True"
                   Background="Transparent"
                                        MouseUp="elementFlowx_MouseUp"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </Grid>
            </Canvas>

     

    Le deuxième est la définition de la partie basse de l'interface (bigCanvas) :

     

    Code Snippet
            <ScrollViewer RenderTransformOrigin="0.5,0.5" x:Name="bigCanvas" Margin="15,135,15,35" Panel.ZIndex="0" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
                <ScrollViewer.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </ScrollViewer.RenderTransform>
            <Grid Margin="5,5,5,5" x:Name="bigGrid" Height="600" MinWidth="990" MinHeight="600" Width="990" Panel.ZIndex="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Rectangle Fill="Transparent" Stroke="Transparent" Opacity="1" x:Name="bigRectangle" Panel.ZIndex="-1" Margin="0,0,12.582,2.345" PreviewMouseUp="bigRectangle_PreviewMouseUp"/>
              <Image Margin="128,81.861,143.08,74.234" Source="images\Mamba_Transparent.png" HorizontalAlignment="Left" VerticalAlignment="Top"/>
             </Grid>
            </ScrollViewer>

     

    Le dernier, qui est le plus important, concerne les storyborads nécessaires au switch :

     

    Code Snippet
    <!-- Switch 1 -->
            <Storyboard x:Key="OnMouseUpSwitch1" Completed="SwitchNavigationToFocus">
       <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="littleRectangle" Storyboard.TargetProperty="(Panel.ZIndex)">
        <SplineInt32KeyFrame KeyTime="00:00:00.7500000" Value="-1"/>
       </Int32AnimationUsingKeyFrames>
       <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigRectangle" Storyboard.TargetProperty="(Panel.ZIndex)">
        <SplineInt32KeyFrame KeyTime="00:00:00.7500000" Value="10"/>
       </Int32AnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="0.104"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="0.146"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="450.691"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="-357.784"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="-449.5"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="356.5"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="11.122"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="6.544"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="littleGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="0.159"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="littleGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="-0.423"/>
       </DoubleAnimationUsingKeyFrames>
            </Storyboard>

            <!-- Switch 2 -->
            <Storyboard x:Key="OnMouseUpSwitch2" Completed="SwitchBigToFocus">
                <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="littleRectangle" Storyboard.TargetProperty="(Panel.ZIndex)">
                    <SplineInt32KeyFrame KeyTime="00:00:00.7500000" Value="0"/>
                </Int32AnimationUsingKeyFrames>
                <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigRectangle" Storyboard.TargetProperty="(Panel.ZIndex)">
                    <SplineInt32KeyFrame KeyTime="00:00:00.7500000" Value="-1"/>
                </Int32AnimationUsingKeyFrames>
                <Int32AnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="itemControl" Storyboard.TargetProperty="(Panel.ZIndex)">
                    <SplineInt32KeyFrame KeyTime="00:00:00.7500000" Value="-1"/>
                </Int32AnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="bigCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                 <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                 <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                 <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="navigationCanvas" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                 <SplineDoubleKeyFrame KeyTime="00:00:00.7500000" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>

     

     

     
    Bon courage, car il y a de quoi lire. N'hésitez pas à critiquer ce code, car je suis vraiment novice dans ce domaine.

    vendredi 16 mai 2008 14:15