XAML, Secondary Button zeigt nicht

Question

Ich versuche, 2 Tasten an der gleichen Stelle mit Xaml zu verwenden, wird eine Play-Taste sein und die andere eine Pause-Taste, aber aus irgendeinem Grund, nicht ganz sicher wieso gerade noch, aber nur die erste Schaltfläche in XAML wird angezeigt, und wenn ich diese bestimmte Schaltfläche ausgeblendet, wird die sekundäre Schaltfläche nie gerendert.

irgendwelche Ideen?

Hier ist der Code.

<DataGridTemplateColumn Width="100"> 
    <DataGridTemplateColumn.CellTemplate> 
     <DataTemplate> 
      <DockPanel Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center"> 
       <Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Hidden" Name="PlayButton" 
              Width="50" Height="50" HorizontalAlignment="Center" 
              VerticalAlignment="Center" Click="OnPlayButtonClicked" 
              d:DataContext="{d:DesignInstance local:MainWindow}"> 
        <Rectangle Width="20" 
                Height="20"> 
         <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
         <Rectangle.Fill> 
          <VisualBrush Stretch="Fill" 
                  Visual="{StaticResource appbar_control_play}" /> 
         </Rectangle.Fill> 
        </Rectangle> 
        <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
       </Button> 

       <Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Visible" Name="PauseButton" 
              Width="50" Height="50" HorizontalAlignment="Center" 
              VerticalAlignment="Center" Click="OnPauseButtonClicked" 
              d:DataContext="{d:DesignInstance local:MainWindow}"> 
        <Rectangle Width="20" 
                Height="20"> 
         <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
         <Rectangle.Fill> 
          <VisualBrush Stretch="Fill" 
                  Visual="{StaticResource appbar_control_pause}" /> 
         </Rectangle.Fill> 
        </Rectangle> 
        <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
       </Button> 
      </DockPanel> 
     </DataTemplate> 
    </DataGridTemplateColumn.CellTemplate> 
</DataGridTemplateColumn> 

Answer 1

Verwenden Sie einen Grid anstelle eines DockPanel:

<Grid Width="50" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center"> 
    <Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Hidden" Name="PlayButton" 
              Width="50" Height="50" HorizontalAlignment="Center" 
              VerticalAlignment="Center" Click="OnPlayButtonClicked" 
              d:DataContext="{d:DesignInstance local:MainWindow}"> 
     <Rectangle Width="20" 
                Height="20"> 
      <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
      <Rectangle.Fill> 
       <VisualBrush Stretch="Fill" 
                  Visual="{StaticResource appbar_control_play}" /> 
      </Rectangle.Fill> 
     </Rectangle> 
     <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
    </Button> 

    <Button Style="{DynamicResource MetroCircleButtonStyle}" Visibility="Visible" Name="PauseButton" 
              Width="50" Height="50" HorizontalAlignment="Center" 
              VerticalAlignment="Center" Click="OnPauseButtonClicked" 
              d:DataContext="{d:DesignInstance local:MainWindow}"> 
     <Rectangle Width="20" 
                Height="20"> 
      <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
      <Rectangle.Fill> 
       <VisualBrush Stretch="Fill" 
                  Visual="{StaticResource appbar_control_pause}" /> 
      </Rectangle.Fill> 
     </Rectangle> 
     <!--<Image Width="50" Height="50" Source="Resources/playIcon.png" Name="Image"></Image>--> 
    </Button> 
</Grid>