Search code examples
visual-studioxamlvisual-studio-2017visual-studio-designer

No XAML designer preview with custom ChromeWindow

I've been trying to build a custom chrome window vs a window with no border style. In Visual Studio, the XAML designer is showing the custom title bar in the content area, and the actual content area controls aren't visible. When I compile and run it, everything looks correct.

One other side problem was I can't seem to get the Command binding on the titlebar buttons correct. I tried binding them to the appropriate SystemCommands but I'm not sure what I'm doing wrong there either. So instead I just added click event handlers and do the code there. Was just trying for a XAML only solution for that. The Click event handlers work correctly.

Below is my XAML. At the end of the XAML is a basic Grid with a TextBlock that says "I should be visible!" but it isn't in the designer.

Also attached (if I have the permissions to do so) is a screenshot of what the designer looks like in my Visual Studio. As you can see the controls I placed in the custom title bar are clearly visible. You'll also see in the screenshot that the default windows title bar is also visible.

Can anyone point me in the right direction as to why my designer isn't WYSIWYG?

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>

Solution

  • I figured it out by accident.

    In case anyone else happens across this post with a similar problem.

    The following bit of code was wrong:

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

    The correct code is either just an empty ContentPresenter or the MSDN example for ChromeWindow of:

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

    No binding seemed to work fine as well. Also, my original code above, I should probably have the content presenter as the first item in the Grid so that content doesn't obscure the title bar. I had there originally, but I moved it to the last entry to see if the reason I was seeing only the title bar was because of z-order.