Как расположить элементы управления в верхнем правом углу в XAML / Silverlight?

Question

Я прохожу процесс разработки моего первого приложения Silverlight на основе элемента управления PivotViewer из Silverlight 4. У меня проблемы с организацией верхней панели в соответствии с моим дизайном:

Пользовательский интерфейс Pivot http://www.richard -slater.co.uk / wp-content / uploads / 2010/08 / PivotUI.png

Я нашел способы выравнивания логотипа и заголовка по левому краю, способа выравнивания кнопок по правому краю с различными комбинациями панелей, однако с этим есть две основные проблемы.

1. XAML выглядит действительно очень некрасиво, вложенные панели, кажется, работают, но не кажутся хорошей практикой.
2. Кажется, я не могу найти способ справиться с изменением размера окна без обрезки или перекрытия.

Я добился лучших результатов с помощью следующего кода:

<StackPanel x:Name="LayoutHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal">
    <Image x:Name="LogoImage" Height="50" Width="50" Source="/EVEMonPivot;component/EVEMonLogoBlue.png" Grid.Column="0" Grid.Row="0" />
    <TextBlock x:Name="TitleText" Height="50" Text="EVEMon Pivot" FontSize="40" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontWeight="Bold" Padding="10,0,0,0" />
</StackPanel>
<StackPanel x:Name="NavHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right">
    <Button x:Name="StackExButton" Style="{StaticResource NavButton}" Click="StackExButton_Click">EVE Online StackExchange</Button>
    <Button x:Name="BugsButton" Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button>
</StackPanel>

Я собираюсь переместить некоторые свойства в стили, однако они все еще кажутся грязными.

Приведенный выше код может также привести к следующему в маленьких окнах:

альтернативный текст http://www.richard -slater.co.uk / wp-content / uploads / 2010/08 / EVEMonPivotOverLay.png

Есть ли лучший способ?

Answer 1

Если вам не нравятся вложенные панели, лучше использовать Grid. С вашими четырьмя элементами создайте сетку из пяти столбцов, например:

<Grid HorizontalAlignment="Stretch">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
    <Image x:Name="LogoImage" 
           Height="50" 
           Width="50" 
           Source="/EVEMonPivot;component/EVEMonLogoBlue.png" 
           Grid.Column="0" />
    <TextBlock x:Name="TitleText" 
               Height="50" 
               Text="EVEMon Pivot" 
               FontSize="40" 
               Grid.Column="1" 
               Grid.Row="0" 
               VerticalAlignment="Center" 
               FontWeight="Bold" 
               Padding="10,0,0,0" />
    <Button x:Name="StackExButton" 
            Grid.Column="4" 
            Style="{StaticResource NavButton}" 
            Click="StackExButton_Click">EVE Online StackExchange</Button>
    <Button x:Name="BugsButton" 
            Grid.Column="5" 
            Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button>
</Grid>

Это устанавливает четыре столбца на Авторазмер, поэтому они подстраиваются под размер ваших элементов пользовательского интерфейса, а центральный столбец имеет размер Звезды, поэтому он заполняет оставшееся пространство между ними.

Answer 2

Несмотря на то, что вы можете использовать столбец сетки размером со звездочку, чтобы обеспечить складывающуюся область между элементами управления, вы по-прежнему должны учитывать, что происходит, когда просто не хватает места (например, 600 пикселей дисплея в 400 -пиксельная область.) Я думаю, что вам нужен ScrollViewer, который представляет собой ContentControl, который позволяет определять, когда появляются полосы прокрутки.

В приведенной ниже разметке я делаю 2 вещи: во-первых, я использую DockPanel из набора инструментов Silverlight, чтобы изолировать левый и правый участки экрана (очень похожая вещь может быть достигнута с помощью сетки из трех столбцов с Cols 0 и 2 - «Авто», а в столбце «1» - «*», но конкретное использование «Влево» и «Вправо» в DockPanel может сделать намерение более читаемым. «Авто» - если содержимое слишком велико, чтобы разместить его, установите полосу прокрутки.

<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"  x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <toolkit:DockPanel >
            <StackPanel toolkit:DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Top"  Height="50" Margin="5">
                <TextBlock Text="Some long text" FontSize="30"/>
            </StackPanel>
            <StackPanel toolkit:DockPanel.Dock="Right"  Orientation="Horizontal" VerticalAlignment="Top"  HorizontalAlignment="Right" Height="50" Margin="5">
                <Button Content="First Button" Margin="5"/>
                <Button Content="Second Button" Margin="5"/>
            </StackPanel>
        </toolkit:DockPanel>
    </ScrollViewer>
    <TextBlock Grid.Row="1" Text="Body Content (DataGrid, etc.)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>