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

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

6 голосов
/ 21 августа 2009

У меня есть окно, в которое я добавляю новый 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>

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

Ответы [ 3 ]

12 голосов
/ 22 августа 2009

Используйте 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), чтобы растянуть его. И, конечно же, хотя все вышеперечисленное является разметкой, вы также можете легко создать такую ​​сетку из кода.

3 голосов
/ 24 апреля 2013

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

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

<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>
0 голосов
/ 22 мая 2019

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

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

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

</Grid>
...