XAML erweiterbar Schaltfläche/Menüpunkt auf der Maus über

Question

Ich bin ziemlich neu in XAML und ich versuche folgende => Menü example menu (Menüpunkte über google, facebook Ich spreche etc.)

zu imitieren

Erwartetes Verhalten:

1. Hoover auf Button

2. sollte folgendermaßen aussehen:

Mein Code gibt mir nur:

Wie erreiche ich die erwartete Ausgabe - meinen TextBlock- machen, einen Teil des erscheinen und seine Taste?

Meine erste Annäherung war, ein Gitter zu benutzen und zwei Spalten zu verursachen und das zweite immer versteckt zu haben und nur auf Staubsauger zu zeigen. Dann kam ich mit einem Button-Ansatz von unten. Schließlich habe ich etwas über den Expander-Kurs herausgefunden ... Ich bin mir nicht sicher, was der richtige Ansatz ist, darunter ist das, was ich bisher habe, offensichtlich weit entfernt von der erwarteten Ausgabe.

<Button Name="button1" Width="170" Height="170" Cursor="Hand"> 
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"> 
    <Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" /> 
    <TextBlock Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink"> 
     MenuItem1 
     <TextBlock.Style> 
      <Style TargetType="TextBlock"> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsMouseOver, ElementName=button1}" Value="True"> 
        <Setter Property="Visibility" Value="Visible" /> 
       </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </TextBlock.Style> 
    </TextBlock> 
</StackPanel> 
<Button.Style> 
    <Style TargetType="Button"> 
     <Setter Property="Background" Value="Green"/> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Background" Value="Red"/> 
       <Setter Property="Margin" Value="20,0,0,0" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</Button.Style> 

Answer 1

Sie Animation dies zu erreichen, verwenden können. Slide-In geben und Slide-Out-Effekt auf MouseEnter und MouseLeave Ereignisse

<Button Name="button1" Cursor="Hand"> 
     <Button.Template> 
      <ControlTemplate> 
       <Grid VerticalAlignment="Center" HorizontalAlignment="Center"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition/> 
         <ColumnDefinition/> 
        </Grid.ColumnDefinitions> 
        <Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" /> 
        <TextBlock Grid.Column="1" x:Name="myTextBlock" Width="0" Height="48" VerticalAlignment="Center" HorizontalAlignment="Left" Background="pink"> 
    MenuItem1 

        </TextBlock> 
        <TextBlock Grid.Column="1" Visibility="Hidden" Width="100" Height="48" x:Name="dummyBlock" /> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <EventTrigger RoutedEvent="MouseEnter"> 
         <BeginStoryboard> 
          <Storyboard > 
           <DoubleAnimation 
            Storyboard.TargetName="myTextBlock" 
            Storyboard.TargetProperty="Width" 
            From="0.0" 
            To="100" 
            Duration="0:0:0.5" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
        <EventTrigger RoutedEvent="MouseLeave"> 
         <BeginStoryboard> 
          <Storyboard > 
           <DoubleAnimation 
            Storyboard.TargetName="myTextBlock" 
            Storyboard.TargetProperty="Width" 
            From="100.0" 
            To="0" 
            Duration="0:0:0.3" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Button.Template> 
    </Button> 

Answer 2

Dies ist ein fairer Start Ihre Anforderungen für die Implementierung:

1.Die Stil verwandeln verwendet render Ihre Taste zu strecken.

2. Die Schaltfläche wechselt Inhalt zu einem gebundenen Bool Cording

<UserControl ...> 
    <UserControl.Resources> 

     <!--*********** Templates ***********--> 
     <ControlTemplate x:Key="VIEWALLTemplate"> 

     </ControlTemplate> 
     <ControlTemplate x:Key="DefultTemplate"> 
      <StackPanel Background="White" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"> 
       <Image Width="48" Height="48" Source="https://pbs.twimg.com/profile_images/638750728354430976/HnTYCHzN_400x400.png" /> 
       <TextBlock Text="MenuItem1" Visibility="Hidden" Width="100" Height="70" VerticalAlignment="Center" HorizontalAlignment="Center" Background="pink"/> 
      </StackPanel> 
     </ControlTemplate> 

     <!--*********** Styles ***********--> 
     <Style TargetType="Button"> 
      <Setter Property="Background" Value="Green"/> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="RenderTransform"> 
         <Setter.Value> 
          <ScaleTransform ScaleX="2" ScaleY="1"/> 
         </Setter.Value> 
        </Setter> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 

    </UserControl.Resources> 

     <Grid> 
      <Button Width="100" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center"> 
       <Button.Content> 
        <ContentControl DataContext="{Binding}" Grid.Row="1"> 
         <ContentControl.Style> 
          <Style TargetType="ContentControl"> 
           <Setter Property="Template" Value="{StaticResource DefultTemplate}" /> 
           <Style.Triggers> 
            <DataTrigger Binding="{Binding Path=SomeBool}" Value="true"> 
             <Setter Property="Template" Value="{StaticResource VIEWALLTemplate}" /> 
            </DataTrigger> 
           </Style.Triggers> 
          </Style> 
         </ContentControl.Style> 
        </ContentControl> 
       </Button.Content> 
      </Button> 
     </Grid> 
</UserControl>