使用自定义ChromeWindow不能进行XAML设计器预览

时间:2018-07-25 18:57:59

标签: visual-studio xaml visual-studio-2017 visual-studio-designer

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

另一个问题是我似乎无法正确显示标题栏按钮上的Command绑定。我尝试将它们绑定到适当的SystemCommands,但是我也不知道自己在做什么错。因此,我只是添加了click事件处理程序,然后在此处执行代码。只是试图为此提供XAML解决方案。 Click事件处理程序可以正常工作。

以下是我的XAML。 XAML的末尾是一个带有TextBlock的基本网格,上面写着“我应该是可见的!”但它不在设计器中。

另附上(如果我有权限的话)是设计器在Visual Studio中的外观的屏幕截图。如您所见,放置在自定义标题栏中的控件清晰可见。您还将在屏幕截图中看到默认的窗口标题栏也可见。

关于我的设计师为什么不是所见即所得的人,有人可以向我指出正确的方向吗?

Designer Screenshot

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

1 个答案:

答案 0 :(得分:0)

我是偶然发现的。

万一其他人遇到类似的问题。

以下代码是错误的:

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

正确的代码只是空的ContentPresenter或ChromeWindow的MSDN示例:

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

似乎没有绑定也可以正常工作。 另外,在我上面的原始代码中,我可能应该将内容演示者作为网格中的第一项,以使内容不会模糊标题栏。我原本在那里,但我将其移至最后一个条目,以查看是否仅看到标题栏的原因是因为z顺序。