Problem mit Expander

  • WPF

Es gibt 11 Antworten in diesem Thema. Der letzte Beitrag () ist von ErfinderDesRades.

    Problem mit Expander

    Hallo liebe Community,
    ich habe momentan ein Problem mit einem Expander, welcher die Form vergrößern und verkleinern können und sich dabei drehen können soll. Der Code ist momentan folgender:
    Spoiler anzeigen

    XML-Quellcode

    1. <Window x:Class="MainWindow"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. Height="200" Width="300" Background="#FFF0F5FA" ResizeMode="CanMinimize" SizeToContent="Width">
    5. <Grid>
    6. <Grid.RowDefinitions>
    7. <RowDefinition Height="90"/>
    8. <RowDefinition Height="85"/>
    9. </Grid.RowDefinitions>
    11. <Canvas Name="GraphCanvas" Background="White" Width="300">
    12. <Path Name="Expander" Data="M200,50 L220,100 125,140 125,240 70,240 70,100 70,100 70,100 z M130,0 L150,50 55,85 55,190 0,190 0,50 0,50 0,50 z"
    13. Height="31" Width="28" Fill="Black" Stretch="Fill" Opacity=".1" Canvas.Right="-27.5" Canvas.Top="40">
    14. <Path.RenderTransform>
    15. <TransformGroup>
    16. <ScaleTransform ScaleY="1" ScaleX="-1"/>
    17. <SkewTransform AngleY="0" AngleX="0"/>
    18. <RotateTransform Angle="35"/>
    19. <TranslateTransform/>
    20. </TransformGroup>
    21. </Path.RenderTransform>
    23. <Path.Triggers>
    24. <EventTrigger RoutedEvent="Path.MouseEnter">
    25. <BeginStoryboard>
    26. <Storyboard>
    27. <DoubleAnimation
    28. Storyboard.TargetName="Expander"
    29. Storyboard.TargetProperty="Opacity"
    30. To=".5" Duration="0:0:0.2"/>
    31. </Storyboard>
    32. </BeginStoryboard>
    33. </EventTrigger>
    34. <EventTrigger RoutedEvent="Path.MouseLeave">
    35. <BeginStoryboard>
    36. <Storyboard>
    37. <DoubleAnimation
    38. Storyboard.TargetName="Expander"
    39. Storyboard.TargetProperty="Opacity"
    40. To=".1" Duration="0:0:0.2"/>
    41. </Storyboard>
    42. </BeginStoryboard>
    43. </EventTrigger>
    44. <EventTrigger RoutedEvent="Path.MouseDown">
    45. <BeginStoryboard>
    46. <Storyboard>
    47. <DoubleAnimation
    48. Storyboard.TargetName="GraphCanvas"
    49. Storyboard.TargetProperty="Width"
    50. From="300" To="450" AccelerationRatio="1" Duration="0:0:0.25"/>
    51. <DoubleAnimation
    52. Storyboard.TargetName="Expander"
    53. Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
    54. From="1" To="-1" AccelerationRatio="1" Duration="0:0:0.25"/>
    55. <DoubleAnimation
    56. Storyboard.TargetName="Expander"
    57. Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
    58. From="-1" To="1" AccelerationRatio="1" Duration="0:0:0.25"/>
    59. <DoubleAnimation
    60. Storyboard.TargetName="Expander"
    61. Storyboard.TargetProperty="(RenderTransform).(TranslateTransform.X)"
    62. From="0" To="-40" AccelerationRatio="1" Duration="0:0:0.25"/>
    63. </Storyboard>
    64. </BeginStoryboard>
    65. </EventTrigger>
    66. </Path.Triggers>
    67. </Path>
    68. </Canvas>
    69. </Grid>
    70. </Window>

    Nun zu den eigentlichen Problemen:
    1.: Der Expander sollte sich eigentlich nach links umkehren, wenn er "expanded" wird, das tut er allerdings nicht. Er bleibt, wie er ist.
    2.: Ich weiß nicht, wie ich das implementieren kann, dass er sich bei nochmaligem Klicken wieder einzieht.

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „nafets3646“ ()

    ich hab damit rumprobiert, und fund, dass man der ScaleTransform einen Namen verpassen kann, und dann die .ScaleX-Property animieren:

    XML-Quellcode

    1. <Window x:Class="MainWindow2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    3. Height="200" Width="300" Background="#FFF0F5FA" ResizeMode="CanMinimize" SizeToContent="Width">
    4. <Grid>
    5. <Grid.RowDefinitions>
    6. <RowDefinition Height="90"/>
    7. <RowDefinition Height="85"/>
    8. </Grid.RowDefinitions>
    9. <Canvas Name="GraphCanvas" Background="White" Width="250">
    10. <Path Name="Expander" Data="M200,50 L220,100 125,140 125,240 70,240 70,100 70,100 70,100 z M130,0 L150,50 55,85 55,190 0,190 0,50 0,50 0,50 z"
    11. Height="31" Width="28" Fill="Black" Stretch="Fill" Opacity=".1" Canvas.Right="5" Canvas.Top="40" RenderTransformOrigin="0.5,0.5">
    12. <Path.RenderTransform>
    13. <TransformGroup>
    14. <ScaleTransform x:Name="ExpanderScale" />
    15. <!--<SkewTransform AngleY="0" AngleX="0"/>-->
    16. <!--<RotateTransform Angle="35"/>-->
    17. <TranslateTransform/>
    18. </TransformGroup>
    19. </Path.RenderTransform>
    20. <Path.Triggers>
    21. <EventTrigger RoutedEvent="Path.MouseDown">
    22. <BeginStoryboard>
    23. <Storyboard>
    24. <DoubleAnimation
    25. Storyboard.TargetName="GraphCanvas"
    26. Storyboard.TargetProperty="Width"
    27. To="450" AccelerationRatio="1" Duration="0:0:0.25"/>
    28. <DoubleAnimation
    29. Storyboard.TargetName="ExpanderScale"
    30. Storyboard.TargetProperty="ScaleX"
    31. From="1" To="-1" AccelerationRatio="1" Duration="0:0:0.25"/>
    32. </Storyboard>
    33. </BeginStoryboard>
    34. </EventTrigger>
    35. </Path.Triggers>
    36. </Path>
    37. </Canvas>
    38. </Grid>
    39. </Window>
    zum hin und her müssteman den Button halt als ToggleButton auffassen - der hat entsprechende Events, wo man ein Storyboard reinmachen kann.
    Also der Expander-Togglebutton bekäme dann ein ControlTemplate mit diesem Path-Dingens.

    Das mit dem ToggleButton hab ich jetzt hinbekommen, allerdings mach ich bei dem ControlTemplate wohl irgendwas falsch - es verändert sich am ToggleButton direkt gar nichts, dafür wird eine Exception geschmissen.
    Spoiler anzeigen

    XML-Quellcode

    1. <Window x:Class="MainWindow"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. Title="MainWindow" Height="200" Background="#FFF0F5FA" ResizeMode="CanMinimize" SizeToContent="Width">
    5. <Grid>
    6. <Grid.RowDefinitions>
    7. <RowDefinition Height="90"/>
    8. <RowDefinition Height="85"/>
    9. </Grid.RowDefinitions>
    11. <Canvas Name="GraphCanvas" Background="White" Width="300">
    12. <Canvas.BitmapEffect>
    13. <DropShadowBitmapEffect x:Name="Shadow" Color="Black" ShadowDepth=".2" Opacity=".33" Softness="1"/>
    14. </Canvas.BitmapEffect>
    16. <Canvas.Triggers>
    17. <EventTrigger RoutedEvent="Canvas.Loaded">
    18. <BeginStoryboard>
    19. <Storyboard>
    20. <DoubleAnimation
    21. Storyboard.TargetName="Shadow"
    22. Storyboard.TargetProperty="Opacity"
    23. From="0" To=".33" Duration="0:0:1"/>
    24. </Storyboard>
    25. </BeginStoryboard>
    26. </EventTrigger>
    27. </Canvas.Triggers>
    31. <ToggleButton Name="FormExpander" Style="{StaticResource ExpanderButton}" Height="31" Width="28" Opacity=".1" Canvas.Right="-27.5" Canvas.Top="40">
    33. <ToggleButton.RenderTransform>
    34. <TransformGroup>
    35. <ScaleTransform x:Name="FormExpanderScale" ScaleY="1" ScaleX="-1"/>
    36. <SkewTransform x:Name="FormExpanderSkew" AngleY="0" AngleX="0"/>
    37. <RotateTransform x:Name="FormExpanderRotation" Angle="35"/>
    38. <TranslateTransform x:Name="FormExpanderTranslation" X="0"/>
    39. </TransformGroup>
    40. </ToggleButton.RenderTransform>
    42. <ToggleButton.Resources>
    43. <Style x:Name="ExpanderButton" TargetType="{x:Type ToggleButton}">
    44. <Setter Property="Template">
    45. <Setter.Value>
    46. <ControlTemplate TargetType="{x:Type ToggleButton}">
    47. <Border Background="Transparent">
    48. <Path Data="M200,50 L220,100 125,140 125,240 70,240 70,100 70,100 70,100 z M130,0 L150,50 55,85 55,190 0,190 0,50 0,50 0,50 z"
    49. Fill="Black" Stretch="Fill"/>
    50. </Border>
    51. </ControlTemplate>
    52. </Setter.Value>
    53. </Setter>
    54. </Style>
    55. </ToggleButton.Resources>
    58. <ToggleButton.Triggers>
    59. <EventTrigger RoutedEvent="ToggleButton.MouseEnter">
    60. <BeginStoryboard>
    61. <Storyboard>
    62. <DoubleAnimation
    63. Storyboard.TargetName="FormExpander"
    64. Storyboard.TargetProperty="Opacity"
    65. To=".5" Duration="0:0:0.2"/>
    66. </Storyboard>
    67. </BeginStoryboard>
    68. </EventTrigger>
    69. <EventTrigger RoutedEvent="ToggleButton.MouseLeave">
    70. <BeginStoryboard>
    71. <Storyboard>
    72. <DoubleAnimation
    73. Storyboard.TargetName="FormExpander"
    74. Storyboard.TargetProperty="Opacity"
    75. To=".1" Duration="0:0:0.2"/>
    76. </Storyboard>
    77. </BeginStoryboard>
    78. </EventTrigger>
    79. <EventTrigger RoutedEvent="ToggleButton.Checked">
    80. <BeginStoryboard>
    81. <Storyboard>
    82. <DoubleAnimation
    83. Storyboard.TargetName="GraphCanvas"
    84. Storyboard.TargetProperty="Width"
    85. From="300" To="530" AccelerationRatio="1" Duration="0:0:0.25"/>
    86. <DoubleAnimation
    87. Storyboard.TargetName="FormExpanderScale"
    88. Storyboard.TargetProperty="ScaleY"
    89. From="1" To="-1" AccelerationRatio="1" Duration="0:0:0.25"/>
    90. <DoubleAnimation
    91. Storyboard.TargetName="FormExpanderScale"
    92. Storyboard.TargetProperty="ScaleX"
    93. From="-1" To="1" AccelerationRatio="1" Duration="0:0:0.25"/>
    94. <DoubleAnimation
    95. Storyboard.TargetName="FormExpanderTranslation"
    96. Storyboard.TargetProperty="X"
    97. From="0" To="-40" AccelerationRatio="1" Duration="0:0:0.25"/>
    98. <DoubleAnimation
    99. Storyboard.TargetName="FormExpanderTranslation"
    100. Storyboard.TargetProperty="Y"
    101. From="0" To="10" AccelerationRatio="1" Duration="0:0:0.25"/>
    102. </Storyboard>
    103. </BeginStoryboard>
    104. </EventTrigger>
    105. <EventTrigger RoutedEvent="ToggleButton.Unchecked">
    106. <BeginStoryboard>
    107. <Storyboard>
    108. <DoubleAnimation
    109. Storyboard.TargetName="GraphCanvas"
    110. Storyboard.TargetProperty="Width"
    111. From="530" To="300" AccelerationRatio="1" Duration="0:0:0.25"/>
    112. <DoubleAnimation
    113. Storyboard.TargetName="FormExpanderScale"
    114. Storyboard.TargetProperty="ScaleY"
    115. From="-1" To="1" AccelerationRatio="1" Duration="0:0:0.25"/>
    116. <DoubleAnimation
    117. Storyboard.TargetName="FormExpanderScale"
    118. Storyboard.TargetProperty="ScaleX"
    119. From="1" To="-1" AccelerationRatio="1" Duration="0:0:0.25"/>
    120. <DoubleAnimation
    121. Storyboard.TargetName="FormExpanderTranslation"
    122. Storyboard.TargetProperty="X"
    123. From="-40" To="0" AccelerationRatio="1" Duration="0:0:0.25"/>
    124. <DoubleAnimation
    125. Storyboard.TargetName="FormExpanderTranslation"
    126. Storyboard.TargetProperty="Y"
    127. From="10" To="0" AccelerationRatio="1" Duration="0:0:0.25"/>
    128. </Storyboard>
    129. </BeginStoryboard>
    130. </EventTrigger>
    131. </ToggleButton.Triggers>
    132. </ToggleButton>
    133. </Canvas>
    134. </Grid>
    135. </Window>


    //EDIT: Jetzt wirfts im Designer keine Fehler mehr, dafür aber beim Starten:
    Zeilennummer "31" und Zeilenposition "27" von "Die Angabe eines Werts für "System.Windows.StaticResourceExtension" führte zu einer Ausnahme.".


    //EDIT2: Jetzt kommt wieder ein Fehler (hab nichts verändert ?():

    Quellcode

    1. Fehler 1 Die Ressource "ExpanderButton" konnte nicht aufgelöst werden. C:\Users\****\MainWindow.xaml 31 47

    Aber immerhin ist im Designer schonmal das Aussehen richtig.

    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von „nafets3646“ ()

    k.A., so habichdas noch nicht probiert: Im übergeordneten Visual verweist du auf eine StaticResource, die im Visual selbst drinne ist - glaub fast, das geht nicht.

    Jedenfalls nicht sinnvoll. Wenn der ToggleButton diesen Style haben soll, dann tu ihn doch in seine Style-Property, nicht in seine Resourcen.

    Warum bist du ühaupt jetzt mit einem Style unterwegs - was du brauchst ist doch ein Template?

    Das habich jetzt schon ganz oft gesehen, dass jmd, um ein ControlTemplate anzuwenden, einen Style schreibt, wo das Template drin ist, und dann den Style aufs ZielControl anwendet.
    Anstatt das ControlTemplate gleich aufs ZielControl anzuwenden.

    Wo schreibt man solch "von-hinten-durch-die-brust-ins-Auge" immer nur ab? - frag ich mich.

    In diesem Fall von Stackoverflow, wie mache ich es denn richtig?

    //EDIT: Hab nen Weg gefunden, es zum Laufen zu bringen, ist das so richtig?:
    Spoiler anzeigen

    XML-Quellcode

    1. <Window x:Class="MainWindow"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. Title="MainWindow" Height="200" Background="#FFF0F5FA" ResizeMode="CanMinimize" SizeToContent="Width">
    5. <Window.Resources>
    6. <ControlTemplate x:Name="ExpanderButton" x:Key="ExpanderButton" TargetType="{x:Type ToggleButton}">
    7. <Border Background="Transparent">
    8. <Path Data="M200,50 L220,100 125,140 125,240 70,240 70,100 70,100 70,100 z M130,0 L150,50 55,85 55,190 0,190 0,50 0,50 0,50 z"
    9. Fill="Black" Stretch="Fill"/>
    10. </Border>
    11. </ControlTemplate>
    12. </Window.Resources>
    13. <Grid>
    14. <Grid.RowDefinitions>
    15. <RowDefinition Height="90"/>
    16. <RowDefinition Height="85"/>
    17. </Grid.RowDefinitions>
    19. <Canvas Name="GraphCanvas" Background="White" Width="300">
    20. <Canvas.BitmapEffect>
    21. <DropShadowBitmapEffect x:Name="Shadow" Color="Black" ShadowDepth=".2" Opacity=".33" Softness="1"/>
    22. </Canvas.BitmapEffect>
    24. <Canvas.Triggers>
    25. <EventTrigger RoutedEvent="Canvas.Loaded">
    26. <BeginStoryboard>
    27. <Storyboard>
    28. <DoubleAnimation
    29. Storyboard.TargetName="Shadow"
    30. Storyboard.TargetProperty="Opacity"
    31. From="0" To=".33" Duration="0:0:1"/>
    32. </Storyboard>
    33. </BeginStoryboard>
    34. </EventTrigger>
    35. </Canvas.Triggers>
    39. <ToggleButton Name="FormExpander" Template="{StaticResource ExpanderButton}" Height="31" Width="28" Opacity=".1" Canvas.Right="-27.5" Canvas.Top="40">
    41. <ToggleButton.RenderTransform>
    42. <TransformGroup>
    43. <ScaleTransform x:Name="FormExpanderScale" ScaleY="1" ScaleX="-1"/>
    44. <SkewTransform x:Name="FormExpanderSkew" AngleY="0" AngleX="0"/>
    45. <RotateTransform x:Name="FormExpanderRotation" Angle="35"/>
    46. <TranslateTransform x:Name="FormExpanderTranslation" X="0"/>
    47. </TransformGroup>
    48. </ToggleButton.RenderTransform>
    51. <ToggleButton.Triggers>
    52. <EventTrigger RoutedEvent="ToggleButton.MouseEnter">
    53. <BeginStoryboard>
    54. <Storyboard>
    55. <DoubleAnimation
    56. Storyboard.TargetName="FormExpander"
    57. Storyboard.TargetProperty="Opacity"
    58. To=".5" Duration="0:0:0.2"/>
    59. </Storyboard>
    60. </BeginStoryboard>
    61. </EventTrigger>
    62. <EventTrigger RoutedEvent="ToggleButton.MouseLeave">
    63. <BeginStoryboard>
    64. <Storyboard>
    65. <DoubleAnimation
    66. Storyboard.TargetName="FormExpander"
    67. Storyboard.TargetProperty="Opacity"
    68. To=".1" Duration="0:0:0.2"/>
    69. </Storyboard>
    70. </BeginStoryboard>
    71. </EventTrigger>
    72. <EventTrigger RoutedEvent="ToggleButton.Checked">
    73. <BeginStoryboard>
    74. <Storyboard>
    75. <DoubleAnimation
    76. Storyboard.TargetName="GraphCanvas"
    77. Storyboard.TargetProperty="Width"
    78. From="300" To="530" AccelerationRatio="1" Duration="0:0:0.25"/>
    79. <DoubleAnimation
    80. Storyboard.TargetName="FormExpanderScale"
    81. Storyboard.TargetProperty="ScaleY"
    82. From="1" To="-1" AccelerationRatio="1" Duration="0:0:0.25"/>
    83. <DoubleAnimation
    84. Storyboard.TargetName="FormExpanderScale"
    85. Storyboard.TargetProperty="ScaleX"
    86. From="-1" To="1" AccelerationRatio="1" Duration="0:0:0.25"/>
    87. <DoubleAnimation
    88. Storyboard.TargetName="FormExpanderTranslation"
    89. Storyboard.TargetProperty="X"
    90. From="0" To="-40" AccelerationRatio="1" Duration="0:0:0.25"/>
    91. <DoubleAnimation
    92. Storyboard.TargetName="FormExpanderTranslation"
    93. Storyboard.TargetProperty="Y"
    94. From="0" To="10" AccelerationRatio="1" Duration="0:0:0.25"/>
    95. </Storyboard>
    96. </BeginStoryboard>
    97. </EventTrigger>
    98. <EventTrigger RoutedEvent="ToggleButton.Unchecked">
    99. <BeginStoryboard>
    100. <Storyboard>
    101. <DoubleAnimation
    102. Storyboard.TargetName="GraphCanvas"
    103. Storyboard.TargetProperty="Width"
    104. From="530" To="300" AccelerationRatio="1" Duration="0:0:0.25"/>
    105. <DoubleAnimation
    106. Storyboard.TargetName="FormExpanderScale"
    107. Storyboard.TargetProperty="ScaleY"
    108. From="-1" To="1" AccelerationRatio="1" Duration="0:0:0.25"/>
    109. <DoubleAnimation
    110. Storyboard.TargetName="FormExpanderScale"
    111. Storyboard.TargetProperty="ScaleX"
    112. From="1" To="-1" AccelerationRatio="1" Duration="0:0:0.25"/>
    113. <DoubleAnimation
    114. Storyboard.TargetName="FormExpanderTranslation"
    115. Storyboard.TargetProperty="X"
    116. From="-40" To="0" AccelerationRatio="1" Duration="0:0:0.25"/>
    117. <DoubleAnimation
    118. Storyboard.TargetName="FormExpanderTranslation"
    119. Storyboard.TargetProperty="Y"
    120. From="10" To="0" AccelerationRatio="1" Duration="0:0:0.25"/>
    121. </Storyboard>
    122. </BeginStoryboard>
    123. </EventTrigger>
    124. </ToggleButton.Triggers>
    125. </ToggleButton>
    126. </Canvas>
    127. </Grid>
    128. </Window>

    ah- StackOverflow - c#ler!
    (Ich stichel ja gerne gegen c#ler, weil die immer alles so umständlich machen.)


    Ansonsten sieht doch gut aus.

    Ich hab hier auch ein, wo das Template gleich mit drinne ist:

    XML-Quellcode

    1. <ToggleButton Width="60" HorizontalAlignment="Left" >
    2. <Control.Template>
    3. <ControlTemplate>
    4. <Grid Background="#00000000">
    5. <Path Margin="5" Stretch="Fill" Data="M0,0L4,8 0,16 M4,0L8,8 4,16" StrokeThickness="12" Stroke="Black" />
    6. </Grid>
    7. </ControlTemplate>
    8. </Control.Template>
    9. </ToggleButton>
    wobei mir eine Border eiglich besser gefällt als wie bei mir, mittm Grid als LayoutRoot des Templates.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „ErfinderDesRades“ ()

Facebook
Telefonspende