没有 XAML 带有自定义 ChromeWindow 的设计器预览

Question

我一直在尝试构建自定义 chrome window 与没有边框样式的 window。在 Visual Studio 中，XAML 设计器在内容区域中显示自定义标题栏，而实际的内容区域控件不可见。当我编译并运行它时，一切看起来都是正确的。

另一个方面的问题是我似乎无法正确绑定标题栏按钮上的命令。我尝试将它们绑定到适当的系统命令，但我也不确定我在那里做错了什么。所以我只是添加了点击事件处理程序并在那里执行代码。只是为此尝试 XAML 唯一的解决方案。 Click 事件处理程序工作正常。

下面是我的XAML。 XAML 的末尾是一个带有文本块的基本网格，上面写着 "I should be visible!" 但它不在设计器中。

还附上了（如果我有权限的话）我的 Visual Studio 中设计师的截图。如您所见，我放置在自定义标题栏中的控件清晰可见。您还会在屏幕截图中看到默认的 windows 标题栏也是可见的。

关于为什么我的设计师不是所见即所得的，谁能给我指出正确的方向？

<Window x:Class="Window1"
    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:local="clr-namespace:ChromeWindowTest"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="Window1"
    Title="Window1"
    Width="800"
    Height="450"
    Background="#252525"
    Foreground="White"
    mc:Ignorable="d">
<WindowChrome.WindowChrome>
    <WindowChrome CornerRadius="0"
                  GlassFrameThickness="0,0,0,1"
                  NonClientFrameEdges="None"
                  ResizeBorderThickness="5"
                  UseAeroCaptionButtons="True" />
</WindowChrome.WindowChrome>
<Window.Resources>
    <local:WindowStateToMarginConverter x:Key="WindowStateToMarginConverter" />
    <local:WindowStateToVisibilityConverter x:Key="WindowStateToVisibilityConverter" />

    <Style TargetType="TextBlock">
        <Setter Property="Foreground"
                Value="White" />
        <Setter Property="FontFamily"
                Value="Lucida Sans Unicode" />
        <Setter Property="FontSize"
                Value="12 pt" />
        <Setter Property="Margin"
                Value="3,0" />
    </Style>

    <Style x:Key="CaptionButtonStyle"
           TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="LayoutRoot"
                          Width="44"
                          Height="30"
                          Background="Transparent"
                          WindowChrome.IsHitTestVisibleInChrome="True">
                        <TextBlock x:Name="txt"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   FontFamily="Segoe MDL2 Assets"
                                   FontSize="10"
                                   Foreground="White"
                                   RenderOptions.ClearTypeHint="Auto"
                                   Text="{TemplateBinding Content}"
                                   TextOptions.TextFormattingMode="Display"
                                   TextOptions.TextRenderingMode="Aliased" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="True">
                            <Setter TargetName="LayoutRoot"
                                    Property="Background"
                                    Value="#F79721" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="MinimizeButtonStyle"
           BasedOn="{StaticResource CaptionButtonStyle}"
           TargetType="Button">
        <Setter Property="Content"
                Value="&#xE949;" />
    </Style>

    <Style x:Key="MaximizeButtonStyle"
           BasedOn="{StaticResource CaptionButtonStyle}"
           TargetType="Button">
        <Setter Property="Content"
                Value="&#xE739;" />
        <Setter Property="Visibility"
                Value="{Binding WindowState,
                                Converter={StaticResource WindowStateToVisibilityConverter},
                                ConverterParameter=0}" />
    </Style>

    <Style x:Key="RestoreButtonStyle"
           BasedOn="{StaticResource CaptionButtonStyle}"
           TargetType="Button">
        <Setter Property="Content"
                Value="&#xE923;" />
        <Setter Property="Visibility"
                Value="{Binding WindowState,
                                Converter={StaticResource WindowStateToVisibilityConverter},
                                ConverterParameter=2}" />
    </Style>

    <Style x:Key="CloseButtonStyle"
           TargetType="Button">
        <Setter Property="Content"
                Value="&#xE711;" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="LayoutRoot"
                          Width="44"
                          Height="30"
                          Background="Transparent"
                          WindowChrome.IsHitTestVisibleInChrome="True">
                        <TextBlock x:Name="txt"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   FontFamily="Segoe MDL2 Assets"
                                   FontSize="10"
                                   Foreground="White"
                                   RenderOptions.ClearTypeHint="Auto"
                                   Text="{TemplateBinding Content}"
                                   TextOptions.TextFormattingMode="Display"
                                   TextOptions.TextRenderingMode="Aliased" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver"
                                 Value="True">
                            <Setter TargetName="LayoutRoot"
                                    Property="Background"
                                    Value="Red" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Window.Template>
    <ControlTemplate TargetType="{x:Type Window}">
        <Grid Background="{Binding RelativeSource={RelativeSource TemplatedParent},
                                   Path=Background}">
            <StackPanel Height="32"
                        Margin="{Binding RelativeSource={RelativeSource TemplatedParent},
                                         Path=WindowState,
                                         Converter={StaticResource WindowStateToMarginConverter}}"
                        VerticalAlignment="Top"
                        Orientation="Horizontal">
                <Button HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Click="Icon_Click"
                        WindowChrome.IsHitTestVisibleInChrome="True">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="Transparent">
                                <ContentPresenter />
                            </Grid>
                        </ControlTemplate>
                    </Button.Template>
                    <Image Width="32"
                           Height="32"
                           Source="{Binding RelativeSource={RelativeSource TemplatedParent},
                                            Path=Icon}"
                           WindowChrome.IsHitTestVisibleInChrome="True" />
                </Button>
                <StackPanel Orientation="Vertical">
                    <TextBlock HorizontalAlignment="Left"
                               VerticalAlignment="Top"
                               FontSize="10 pt"
                               LineHeight="16"
                               LineStackingStrategy="BlockLineHeight"
                               Text="{Binding RelativeSource={RelativeSource TemplatedParent},
                                              Path=Title}" />
                    <TextBlock HorizontalAlignment="Left"
                               VerticalAlignment="Top"
                               FontSize="10 pt"
                               LineHeight="16"
                               LineStackingStrategy="BlockLineHeight"
                               Text="{Binding Path=SubTitle}" />
                </StackPanel>
            </StackPanel>
            <Button x:Name="btn"
                    Margin="3"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    Click="btn_Click"
                    Content="Placeholder"
                    WindowChrome.IsHitTestVisibleInChrome="True" />

            <StackPanel HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Orientation="Horizontal">
                <Button x:Name="MinimizeButton"
                        Click="MinimizeButton_Click"
                        Style="{DynamicResource MinimizeButtonStyle}" />
                <Button x:Name="MaximizeButton"
                        Click="MaximizeButton_Click"
                        Style="{DynamicResource MaximizeButtonStyle}" />
                <Button x:Name="RestoreButton"
                        Click="MaximizeButton_Click"
                        Style="{DynamicResource RestoreButtonStyle}" />
                <Button x:Name="CloseButton"
                        Click="CloseButton_Click"
                        Style="{DynamicResource CloseButtonStyle}" />
            </StackPanel>
            <ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
                                                                               AncestorType=Window},
                                                Path=Content}" />
        </Grid>
    </ControlTemplate>
</Window.Template>
<Grid Margin="0,35,0,0">
    <TextBlock Text="I should be visible!" />
</Grid>

Answer 1

偶然发现的

以防其他人遇到类似问题post。

下面的代码是错误的：

            <ContentPresenter Content="{Binding RelativeSource={RelativeSource FindAncestor,
                                                                           AncestorType=Window},
                                            Path=Content}" />

正确的代码要么只是一个空的 ContentPresenter，要么是 ChromeWindow 的 MSDN 示例：

<ContentPresenter Content="{TemplateBinding Content}" />

没有绑定似乎也能正常工作。另外，我上面的原始代码，我可能应该将内容展示者作为网格中的第一项，这样内容就不会遮住标题栏。我原来在那里，但我把它移到最后一个条目，看看我只看到标题栏的原因是否是因为 z-order.

没有 XAML 带有自定义 ChromeWindow 的设计器预览

No XAML designer preview with custom ChromeWindow

xaml

visual-studio-designer

visual-studio

visual-studio-2017