Центрирование элемента управления WPF

Question

У меня есть окно, в котором я добавляю новый UserControl для (с изображением) я просто хочу центрировать элемент управления в середине экрана (как по вертикали, так и по горизонтали).Я могу заставить работать только вертикальный.Я собираюсь поменять местами контент в DockPanel из моего CodeBehind и хочу показать этот экран запуска, прежде чем я начну создавать свой пользовательский интерфейс слайд-шоу, это означает, что содержимое задается из CodeBehind.

Мой Window:

<Window x:Class="GreenWebPlayerWPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="512" Width="853" WindowStyle="None" WindowState="Maximized" WindowStartupLocation="CenterScreen">
    <DockPanel Width="Auto" Height="Auto" Name="TransitionContainer" Background="Black" Margin="0" LastChildFill="True"></DockPanel>
</Window>

Мой UserControl:

<UserControl x:Class="GreenWebPlayerWPF.FrontPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DockPanel Background="Black">
        <Image Name="image1" Stretch="None" Source="/GreenWebPlayerWPF;component/gw.png" />
    </DockPanel>
</UserControl>

Пожалуйста, обратите внимание, что я использую развернутый / полноэкранный режим.

Answer 1

Используйте Grid:

  <Grid>  
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <!-- Replace with your UserControl -->
    <Button Content="Foo" Grid.Column="1" Grid.Row="1"/>
  </Grid>

Вы можете закрепить его внутри вашего DockPanel (если у вас должен быть DockPanel там), чтобы растянуться.И, конечно, хотя все вышесказанное является разметкой, вы можете так же легко создать такую сетку из кода.

Answer 2

Я постоянно сталкиваюсь с этой проблемой при попытке центрировать элементы на странице.Проблема со StackPanel заключается в том, что HorizontalAlignment не действует, если ориентация является горизонтальной, а UpperAlignment не действует, если ориентация является вертикальной.Итак, вы продолжаете биться головой, пытаясь установить значения, но безрезультатно.То, что это так работает, вполне логично, но было бы хорошо, если бы об этом сообщалось как об ошибке.

Решение, которое я нашел, состоит в том, чтобы иметь две черепичные панели StackPanel, одну по центру по горизонтали, а другую по вертикали, как показано ниже.Определение размера родительской панели необходимо для определения размера промежуточной панели, иначе она будет плоской, а ее содержимое скрыто - абсолютное значение также подойдет.Хотя это и не панацея, но это немного менее многословно, чем использование сетки.

<StackPanel Background="Bisque" Orientation="Vertical" Width="300" Height="300" >
    <StackPanel HorizontalAlignment="Center"  Orientation="Horizontal"
                  Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=StackPanel}, Path=ActualHeight}">
        <StackPanel VerticalAlignment="Center" Width="200" Height="60" Background="Blue">
        </StackPanel>
    </StackPanel>
</StackPanel>

Answer 3

Это довольно старый метод, но центрировать элемент управления теперь так же просто, как:

<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Height="350" Width="600">
        <TextBox />
    </StackPanel>

</Grid>