使用负高度边距值正确垂直对齐控件

时间:2016-07-23 00:21:48

标签: xaml

我创建了一个基于网格的XAML页面。在网格中,我显示的图像不需要负上边距,垂直值。在我的页面中,我在文本块中有两个标签,这些标签在网格堆栈面板中不能正确对齐,而在文本块中使用负顶边距值。第一个标签文本块我必须使用Margin =“0,-35,0,0”,第二个我必须使用Margin =“0,-650,0,0。XAML在下面请帮助。

<Window
    x:Class="MasterPage.ApplicationInfoWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:v="clr-namespace:MasterPage"
    Title="Intake 4" Height="900" Width="1000" Background="#FFD9DDE8">
    <DockPanel>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>
        </Grid>
        <StackPanel >
                <Border Margin="0, 0, 0, 0" BorderBrush="Black" BorderThickness="1">
                <StackPanel Height="133" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">

                    <StackPanel>
                        <Image Source="Images\header.jpg" Stretch="Fill" DockPanel.Dock="Top" Height="47"  />
                    </StackPanel>

                    <StackPanel Margin="3,0,0,5" HorizontalAlignment="Left">
                        <Image Source="Images\DSPASS_logo.png" Width="324" Stretch="Fill" DockPanel.Dock="Top" Height="80" />
                    </StackPanel>
                    <StackPanel DockPanel.Dock="Top" HorizontalAlignment="Right" >
                        <TextBlock FontSize="15" TextWrapping="WrapWithOverflow" Height="25" Margin="0,-35,0,0" >
                 <Label FontSize="10" HorizontalContentAlignment="Right"  HorizontalAlignment="Right" Name="Namelabel" Width="230" FontWeight="Bold" Foreground="#1664A1" Content="Name"/>
                        </TextBlock>
                    </StackPanel>
        </StackPanel>

        </Border>

        <Border Margin="0, 0, 0, 0" BorderBrush="Black" BorderThickness="1">

                <StackPanel Background="wHITE" Height="358" VerticalAlignment="Top" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1">
                    <StackPanel>
                    <Image Source="Images\silhouette.jpg" VerticalAlignment="Top"    HorizontalAlignment="Left" Width="320" Stretch="Fill" DockPanel.Dock="Top" Height="360" />
                </StackPanel>
                    <StackPanel VerticalAlignment="Top" >
                        <TextBlock FontSize="15"  HorizontalAlignment="Right" Height="75" Margin="0, -650, 0, 0"  TextWrapping="WrapWithOverflow" >
                 <Label FontSize="35" HorizontalContentAlignment="Left"   Name="Namelabel2" Width="640" FontWeight="Bold" Foreground="#1664A1" Content="Name"/>
                    </TextBlock>
                </StackPanel>
                    </StackPanel>
        </Border>
        </StackPanel>


    </DockPanel>
</Window>

2 个答案:

答案 0 :(得分:0)

您的代码有两个问题:

1)使用DockPanel时,您无法破坏Visual Tree。这意味着您对接的控件必须是DockPanel的直接子控件。例如:

<DockPanel>
    <Image DockPanel.Dock="Left" ... />
    <Label DockPanel.Dock="Right" .../>
</DockPanel>

否则DockPanel将无法再查看/停靠它们。网格和子列/行设置也是如此。

2)您正在包装Container中的每个Control。如果没有必要,它只会污染 视觉树,在这种情况下打破你想要做的连接。

重构后,不再需要负边距:

<Window
    x:Class="MasterPage.ApplicationInfoWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:v="clr-namespace:MasterPage"
    Title="Intake 4" Height="900" Width="1000" Background="#FFD9DDE8">
    <StackPanel>
        <Border Margin="0, 0, 0, 0" BorderBrush="Black" BorderThickness="1">
            <StackPanel Height="133" VerticalAlignment="Top">
                <Image Source="Images\header.jpg" Stretch="Fill" Height="47"  />
                <DockPanel Margin="3,0,0,5">
                    <Image DockPanel.Dock="Left" Source="Images\DSPASS_logo.png" Width="324" Stretch="Fill" Height="80" />
                    <Label DockPanel.Dock="Right" FontSize="10" HorizontalContentAlignment="Right"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Name="Namelabel" Width="230" FontWeight="Bold" Foreground="#1664A1" Content="Name"/>
                </DockPanel>
            </StackPanel>
        </Border>    
        <Border Margin="0, 0, 0, 0" BorderBrush="Black" BorderThickness="1">
            <DockPanel Background="White" Height="358" VerticalAlignment="Top">
                <Image DockPanel.Dock="Left" Source="Images\silhouette.jpg" VerticalAlignment="Top" HorizontalAlignment="Left" Width="320" Stretch="Fill" Height="360" />
                <Label DockPanel.Dock="Right" FontSize="35" HorizontalContentAlignment="Left" Name="Namelabel2" Width="640" FontWeight="Bold" Foreground="#1664A1" Content="Name"/>
            </DockPanel>
        </Border>
    </StackPanel>
</Window>

答案 1 :(得分:-1)

正如我在帖子中所述,我在XMAL中使用负边距值来定位控件。为了防止在包含嵌套网格的StackPanel中正确使用网格,可以进行正确的垂直对齐。

现在要注意水平对齐使用以下技术将处理这个问题:

<StackPanel Orientation=Vertical />
    <StackPanel Orientation=Horizontal />
        content.....
    </StackPanel>
 </StackPanel>