Question

我正在完成基于Silverlight 4中的PivotViewer控件设计我的第一个Silverlight应用程序的过程。我在按照我的设计在顶部组织栏时遇到问题：

Pivot UI http://www.richard-slater.co.uk/wp-content/uploads/2010/08/PivotUI.png

我找到了左对齐徽标和标题的方法，这是一种将按钮与各种面板组合对齐的方法，但它有两个主要问题。

XAML看起来非常难看，嵌套面板似乎有效，但似乎不是很好的做法。
我似乎无法找到一种方法来处理窗口调整大小而不剪切或重叠。

我使用以下代码获得了最佳效果：

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

我打算将一些属性移动到样式中，但它仍然感觉很乱。

以上代码也可以在小窗口中产生以下结果：

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

这会将四列设置为自动调整大小，因此它们会根据UI元素的大小进行调整，中间列的颜色为星号，因此它会填充它们之间的其余空间。

Answer 2

虽然您可以使用星号网格列来强制控制之间的可折叠区域，但您仍然需要考虑当没有足够空间时会发生什么（例如400像素显示400 -pixel wide area。）我认为你需要的是一个ScrollViewer，它是一个ContentControl，可以让你确定滚动条出现的时间。

在下面的标记中，我正在做两件事：首先，我使用Silverlight工具包的DockPanel来隔离显示器的左侧和右侧部分（使用Cols 0和3的3列网格可以完成非常类似的事情） 2设置为“Auto”，Col 1设置为“*”，但DockPanel中Left和Right的特定使用可能使意图更具可读性。）其次，整个事情被包装在ScrollViewer中，并将HorizontalScrollBarVisibility设置为“自动” - 当内容太大而无法放入时，请竖起滚动条。

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

如何在XAML / Silverlight的右上角布局控件？

2 个答案: