碼頭圖片到

Question

我已經創建了下面的用戶控件來顯示視頻的StackPanel WPF的權利：

<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> 

這看起來是這樣的：

我想定位「全屏'圖標的方式在這樣的權利（我嘲笑這在油漆）：

我希望全屏圖標停留在正確的位置，並且控件（播放，滑塊等）始終位於中間。

我該怎麼做？

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行右對齊。