Dock Изображение справа от StackPanel WPF

Question

Я создал следующий UserControl для отображения видео:

<UserControl x:Class="InstallerToolkit.UserControls.UserControlVideoPlayer" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     mc:Ignorable="d" 
     d:DesignHeight="300" d:DesignWidth="464" Loaded="UserControl_Loaded"> 
<Grid Background="Black"> 
    <StackPanel VerticalAlignment="Bottom" Background="Black" > 
     <MediaElement Name="MediaElement" MediaOpened="Element_MediaOpened" MediaEnded="MediaElement_MediaEnded" LoadedBehavior="Manual" UnloadedBehavior="Stop" MouseEnter="MediaElement_MouseEnter" /> 
     <StackPanel Background="Gray"> 
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="Gray"> 
       <Image Name="ImagePlay" Source="/Images/play.png" MouseDown="OnMouseDownPlayMedia" VerticalAlignment="Center" Height="25" Width="25"/> 
       <Slider x:Name="timelineSlider" Thumb.DragStarted="DragStarted" Thumb.DragCompleted="DragCompleted" Margin="5" ValueChanged="SeekToMediaPosition" Width="70"/> 
       <TextBlock x:Name="lblProgressStatus" Margin="5"><Run Text="00:00"/></TextBlock> 
       <TextBlock x:Name="lblSepatator" Margin="5"><Run Text="/"/></TextBlock> 
       <TextBlock x:Name="lblTotalLength" Margin="5"><Run Text="00:00"/></TextBlock> 
       <Image Name="ImageFullScreen" Source="/images/fullscreen.png" MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseEnter="ImageFullScreen_MouseEnter" MouseLeave="ImageFullScreen_MouseLeave" DockPanel.Dock="Right" Height="25" Width="25"/> 
      </StackPanel> 
     </StackPanel> 
    </StackPanel> 
</Grid> 

Это выглядит следующим образом:

Я хочу поместить «в полноэкранном режиме «Иконопись вправо подобным образом (я издевался над этим в Paint):

Я хочу, чтобы значок в полноэкранном режиме оставался пристыкованным вправо, а элементы управления (Play, слайдер и т. Д.) Всегда были в центре.

Как это сделать ??

Answer 1

В первой версии моего ответа, я предположил, что вы можете использовали DockPanel, но потом я понял, что вы, вероятно, хотите, чтобы элементы управления должны быть центрированы относительно MediaElement без влияния на размер кнопки закрытия Image.

Вы можете использовать сетку и поместить элементы управления, а также кнопку закрытия в той же камере, но с различным выравниванием:

<Grid> 
    <Grid.RowDefinitions> 
    <RowDefinition/> 
    <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <MediaElement/> 
    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center"> 
     ... player controls ... 
    </StackPanel> 
    <Image Grid.Row="1" HorizontalAlignment="Right" Source="/images/fullscreen.png" Height="25" Width="25"/> 
</Grid> 

StackPanel центрирован в то время как Image выровнен по правому краю в нижнем Grid строки ,