Question

我想使用WPF向我的窗口添加标题，其中我的标题图标显示为悬挂在标题区域之外（因此底部位于详细信息区域中）。如下所示：

Want To Achieve

我目前使用Dock Panel和Grid Panel实现了一个实现。这看起来如下。

Currently Have

但是，如果我使用VS2013设计器调整图像大小，则图像会在停靠面板的底部被裁剪。我试过ZIndex等来解决这个问题无济于事但我还在学习。

这是我的XAML：

<Window x:Class="Boom.AndezViews.TestWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Test Window" Height="342" Width="581">
    <DockPanel>
        <Grid DockPanel.Dock="Top" Background="CadetBlue"
              VerticalAlignment="Top">
            <Grid x:Name="TitleHeaderGrid" Margin="10 10 0 0" ClipToBounds="False">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid x:Name="TitleHeaderTextGrid" Grid.Column="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0"
                               TextWrapping="Wrap" Text="Window Title" 
                               FontSize="24" Margin="0 0 10 0"/>
                    <TextBlock Grid.Row="1" Margin="10 3 0 0"
                           TextWrapping="Wrap" 
                           Text="Lorem ipsum dolor sit amet, tation torquatos in pro, in nec commune placerat. At volumus legendos eleifend his, at quod noster ocurreret mea, unum admodum mandamus ad sea. Quod vivendum definiebas his ad." 
                           FontSize="12"/>
                </Grid>
                <Border Grid.Column="1" Background="Transparent" Height="109" Margin="0 0 0 0"
                       Width="109" >
                    <Image Source="/Resources/critical_error_icon_trans256.png" RenderSize="10 15">

                    </Image>
                </Border>
            </Grid>
        </Grid>

        <Grid DockPanel.Dock="Bottom" Height="60">
            <Button>
                <TextBlock>Close Me</TextBlock>
            </Button>
        </Grid>

        <Grid Background="ForestGreen">
            <Grid Margin="20 10 0 0">
                <TextBlock>Enter some details:</TextBlock>
                <ScrollViewer Margin="0 20 10 10">
                    <TextBox TextWrapping="Wrap" AcceptsReturn="True"></TextBox>
                </ScrollViewer>
            </Grid>
        </Grid>
    </DockPanel>
</Window>

这类似于以下设计：

enter image description here

就像我说的那样，我仍然在学习WPF，所以我会欣赏窗口整体布局的一些输入。我正在使用Dock Panel，因为我认为这是将标题贴到窗口顶部内部的最佳方法 - 这是WPF的最佳方式吗？

另外，我想为我的主要问题找到答案，即如何让窗口显示在第一个屏幕截图中。为什么会发生剪辑（如果这是正确的WPF术语），如何让图标显示在标题停靠面板之外？

Answer 1

我明白了。请尝试此代码是否满足您的需求：

<Window x:Class="Test1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" >
<Grid x:Name="TitleHeaderGrid" Margin="10 10 0 0" ClipToBounds="False">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Border Background="#FF24C5C5" Grid.ColumnSpan="2"/>
    <TextBlock TextWrapping="Wrap" Text="Window Title" 
                FontSize="24" Margin="0 0 10 0"/>
    <TextBlock Margin="10 40 0 0"
                TextWrapping="Wrap" 
                Text="Lorem ipsum dolor sit amet, tation torquatos in pro, in nec commune placerat. At volumus legendos eleifend his, at quod noster ocurreret mea, unum admodum mandamus ad sea. Quod vivendum definiebas his ad." 
                FontSize="12"/>

    <Border Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="#FF2BA236"></Border>

    <Grid Margin="20 0 0 0" Grid.ColumnSpan="2" Grid.Row="2">
        <TextBlock>Enter some details:</TextBlock>
        <ScrollViewer Margin="0 20 10 10">
            <TextBox TextWrapping="Wrap" AcceptsReturn="True"></TextBox>
        </ScrollViewer>
    </Grid>

    <Rectangle Grid.Column="1" Grid.RowSpan="2" Grid.Row="0" Fill="#FFFF0000" VerticalAlignment="Top" Height="110" Width="109" />

    <Button Grid.Row="3" Grid.ColumnSpan="2" Content="Close Me"/>
</Grid>

出于测试目的，我只是用红色矩形替换了你的图像。

Answer 2

您的图片被剪切在第一行内。您是否尝试将Grid.RowSpan="2"添加到包含图片的边框？

WPF停止剪切我的图像 - 窗口（标题区域）布局

2 个答案: