xaml window style doesn't apply at designer mode (visual studio 2022)

Question

I have the next style for window:

<Window x:Class="App.GUI.MainWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" 
        Title="Main window" Height="350" Width="500" WindowStyle="None" Style="{DynamicResource WindowStyle2}" >

    <Window.Resources>
        <Style x:Key="WindowStyle2" TargetType="{x:Type Window}">
            <Setter Property="WindowStyle" Value="None"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Window}">
                        <Grid Background="LightSkyBlue">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Button Background="Red" Content="X" Grid.Row="0"/>
                            <ContentPresenter Grid.Row="1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <Button Content="xButton" HorizontalAlignment="Left" Margin="203,153,0,0" VerticalAlignment="Top"/>
    </Grid>

</Window>

as result:

I have checked styles for different control (button, label) all is OK, problem only for window.

Answer 1

Your problem here is you define the style inside the window resources but reference it in the window tag.

The window doesn't know about that style as it's rendered by the designer because it's inside it. Not sure staticresource would compile even.

In any case though, this is a bad way to change out the content of a window.

You can instead use datatemplating.

Think of a window as being just a container for your markup. It is in fact a contentcontrol.

You can use datatemplating to create the entire content.

Hence you can have a window1:

        Title="Window1" Height="450" Width="800"
        WindowStyle="None" 
        Content="{Binding}"
        >
</Window>

With nothing at all in it.

Define a data template. This is in app.xaml but you'd usually put this stuff in a resource dictionary which you merge in app.xaml.

<Application.Resources>
    <DataTemplate DataType="{x:Type local:MyBlueViewModel}">
        <local:MyBlueUserControl/>
    </DataTemplate>

Now, whenever the datacontext of window1 is an instance of MyBlueViewModel I will get a MyBlueUserControl in my window, which has MyBlueViewModel as it's datacontext.

That usercontrol should look pretty familiar

    <Grid Background="LightSkyBlue">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Background="Red" Content="X" Grid.Row="0"/>
        <ContentPresenter Grid.Row="1"/>
    </Grid>
</UserControl>

MyBlueViewModel has nothing in it.

When I do

        var win = new Window1 { Content = new MyBlueViewModel() };
        win.Show();

I get a blue window with a red button at the top.

I've resized it down here but just to prove that:

Now.... you might be thinking "but I want some content inside my blue user control."

If you put a contentpresenter in that markup.

You can bind that again to some set property on a viewmodel and template out whatever is in there.

Maybe that does not suit your purpose.

In which case.

Just move your template out the window into app.xaml and reference it there.

Once you re template your window though.

You replaced your window template entirely.

It no longer has anywhere in there to put content.