WindowChrome/title bar theme not syncing with loaded PresentationFramework/XAML - c#

I'm attempting to build a WPF app which uses the Royale theme from XP Media Center. I've correctly referenced the PresentationFramework.Royale DLL and the corresponding XAML resources into my App.xaml, and can confirm that the controls are very much Royale-themed:
However, the window itself fails to be, and the WindowChrome/title bar/window border theme fails to sync up, remaining the standard presentation style for Windows 10. This, of course, is what I'm trying to replicate, at least visually:
Relevant XAML, if useful (all *.cs files are default):
App.xaml:
<Application x:Class="ExampleRoyale.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Ariadne"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Royale;component/themes/Royale.NormalColor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
MainWindow.xaml:
<Window x:Class="ExampleRoyale.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"
xmlns:local="clr-namespace:ExampleRoyale"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="94,39,0,0" VerticalAlignment="Top" Width="120"/>
<ComboBox HorizontalAlignment="Left" Margin="94,12,0,0" VerticalAlignment="Top" Width="120"/>
<Label Content="Label" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="79"/>
<Label Content="Label 2" HorizontalAlignment="Left" Margin="10,39,0,0" VerticalAlignment="Top" Width="79"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" Margin="228,15,0,0" VerticalAlignment="Top" Width="102"/>
<RadioButton Content="RadioButton 2" HorizontalAlignment="Left" Margin="228,44,0,0" VerticalAlignment="Top" Width="102"/>
<TabControl Margin="82,72,82,71">
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
</Window>
Is there a manner to apply the Royale theme to the window container itself, or is Royale controls the closest I will get?


Is there a manner to apply the Royale theme to the window container itself
Unfortunately (?) the window container itself is not part of WPF so there is no custom style for it. It's part of the operating system.
You may be able to make Windows 10 look like Vista by changing the OS settings as a user (I haven't tried) but this is not related to WPF.

Related

Positioning controls - WPF

I am in the process of teaching myself WPF and have an issue that is confusing me. In the XAML below when I open the app the label and image are in the top left part of the window, but when I maximize the window they shift towards the middle. What am I missing that will make the controls keep their relative position?
<Window x:Class="WafLuckyDog.Presentation.Views.ShellWindow"
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"
xmlns:vm="clr-namespace:WafLuckyDog.Applications.ViewModels"
mc:Ignorable="d" Title="{Binding Title}" Icon="{StaticResource ApplicationIcon}" Width="994.273" Height="840"
d:DataContext="{d:DesignInstance vm:ShellViewModel}">
<Window.Background>
<ImageBrush ImageSource="{StaticResource Background}"></ImageBrush>
</Window.Background>
<DockPanel Margin="0,0,-539,0">
<Grid>
<Image Name="Logo" HorizontalAlignment="Left" Margin="0,10,0,669" Width="129"
Source="{StaticResource Logo}" />
<Label Content="Label" HorizontalAlignment="Left" Margin="10,145,0,0" VerticalAlignment="Top" Foreground="AntiqueWhite"/>
</Grid>
</DockPanel>
</Window>

First, you have a DockPanel that has no close tag and is doing nothing, it will give a compile error, so remove it. Also, remove the bottom margin and add a Height and VerticalAlignment properties. The VerticalAlignment and HorizontalAlignment ensures a top right corner anchor.
<Window x:Class="WafLuckyDog.Presentation.Views.ShellWindow"
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"
xmlns:vm="clr-namespace:WafLuckyDog.Applications.ViewModels"
mc:Ignorable="d" Title="{Binding Title}" Icon="{StaticResource ApplicationIcon}" Width="994.273" Height="840"
d:DataContext="{d:DesignInstance vm:ShellViewModel}">
<Window.Background>
<ImageBrush ImageSource="{StaticResource Background}"></ImageBrush>
</Window.Background>
<Grid>
<Image Name="Logo" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="129" Height="129"
Source="{StaticResource Logo}" />
<Label Content="Label" HorizontalAlignment="Left" Margin="10,145,0,0" VerticalAlignment="Top" Foreground="AntiqueWhite"/>
</Grid>
</Window>

How can set absolute position on stackpanel or grid in xaml WPF

Is it possible to set my StackPanel or Grid to be position absolute like CSS.
In CSS is have property Position of the elements and can set to be relative, absolute and is working good.
In XAML can make Grid, StackPanel to use position absolute.

You have to use Canvas in order to set absolute position in WPF.
In case of buttons in a window, here is a sample :
<Window x:Class="tobedeleted.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="MainWindow" Height="350" Width="525">
<Canvas>
<Button Canvas.Left="10" Canvas.Bottom="20">Bottom left</Button>
</Canvas>
</Window>
The output is :
Feel free to ask if help is needed.

Absolute positioning defeats the purpose of WPF, but I agree, sometimes there is no other way so you have two basic options.
Elements under the root grid
Elements in a canvas that is the same size as the window (as Vasilievski pointed out)
Code example:
<Window x:Class="WpfApplication1.Window3"
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"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="Window3" Height="300" Width="300">
<Grid>
<Rectangle Fill="Red" Width="100" Height="120"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Panel.ZIndex="13"
Margin="12,34"
/>
<Rectangle Fill="Green" Width="100" Height="120"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="24,54"
/>
<Canvas>
<Rectangle Canvas.Left="5" Canvas.Top="5" Panel.ZIndex="2" Fill="Yellow" Width="120" Height="30" />
<Rectangle Canvas.Left="25" Canvas.Top="17" Panel.ZIndex="0" Fill="Blue" Width="120" Height="30" />
</Canvas>
</Grid>
</Window>

try this.
<StackPanel>
<Canvas>
<TextBlock Canvas.Left="10" Canvas.Top="6" Text="Choose a value from combobox:" Width="180"/>
<ComboBox Canvas.Left="190" Canvas.Top="4" Width="180"></ComboBox>
</Canvas>
</StackPanel>
RESULT:

Failed to assign to property 'Windows.UI.Xaml.Controls.ContentControl.Content'

In my windows 10 app I want to set button content from a resource file. In the designer the vector image from the resource file is visible. But in runtime the following exception occurs:
An exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in Demo.UI.W10.exe but was not handled in user code
WinRT information: Failed to assign to property 'Windows.UI.Xaml.Controls.ContentControl.Content'. [Line: 15 Position: 17]
Additional information: The text associated with this error code could not be found.
This is my resourche dictionary Icons.xaml wich holds the vector image in the Viewbox control with the key WiFi:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="Wifi">
<Grid Width="48" Height="48" Visibility="Visible">
<Path Data="M16.104004,15.776998C17.199005,15.776998 18.086014,16.664998 18.086014,17.759999 18.086014,18.855977 17.199005,19.742999 16.104004,19.742999 15.009003,19.742999 14.12001,18.855977 14.12001,17.759999 14.12001,16.664998 15.009003,15.776998 16.104004,15.776998z M16.104004,10.558985C19.327011,10.558985,22.057007,12.679008,22.975006,15.601004L21.118011,16.756978C20.652008,14.412986 18.584015,12.646995 16.104004,12.646995 13.580002,12.646995 11.486008,14.474997 11.067001,16.87798L9.1930084,15.730001C10.070007,12.741997,12.831009,10.558985,16.104004,10.558985z M16.028015,5.2879915C21.153015,5.2879915,25.555008,8.378993,27.476013,12.796989L25.771011,13.859C24.221008,9.9980106 20.443008,7.2719988 16.028015,7.2719988 11.586014,7.2719988 7.7890015,10.031 6.2570038,13.929984L4.5440063,12.879997C6.4450073,8.4169874,10.871002,5.2879915,16.028015,5.2879915z M16.028015,0C23.047012,5.5224518E-08,29.114014,4.0700049,32,9.9789981L30.128006,11.144982C27.639008,5.8550076 22.262009,2.1920154 16.028015,2.1920151 9.7550049,2.1920154 4.3480072,5.9020047 1.881012,11.24801L0,10.094995C2.8630066,4.1239905,8.9640045,5.5224518E-08,16.028015,0z" Stretch="Uniform" Fill="#FF000000" Width="48" Height="48" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
</Path>
</Grid>
</Viewbox>
This is my App.xaml where I add the Icons.xaml resource file in the MergedDictionaries:
<Application
x:Class="Demo.UI.W10.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo.UI.W10"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/Icons.xaml"/>
<ResourceDictionary Source="Assets/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
In my mvvmcross page I use the vector image WiFi from the resource file to set the button content.
<views:MvxWindowsPage
x:Class="Demo.UI.W10.Views.ConnectionView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Demo.UI.W10.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:Demo.Core.ViewModels"
xmlns:views="using:Cirrious.MvvmCross.WindowsUWP.Views"
mc:Ignorable="d">
<Page.Resources>
<vm:ConnectionViewModel x:Key="ViewModel"/>
</Page.Resources>
<Grid>
<Button Content="{StaticResource Wifi}" Command="{Binding DemoCommand, Source={StaticResource ViewModel}}" Style="{StaticResource BtnMenuStyle}"/>
</Grid>
How can I use the vector image from the resource dictionary as button content?

You can do placing the resources inside a DataTemplate:
<DataTemplate x:Key="Wifi">
<Viewbox >
<Grid Width="48" Height="48" Visibility="Visible">
<Path Data="M16.104004,15.776998C17.199005,15.776998 18.086014,16.664998 18.086014,17.759999 18.086014,18.855977 17.199005,19.742999 16.104004,19.742999 15.009003,19.742999 14.12001,18.855977 14.12001,17.759999 14.12001,16.664998 15.009003,15.776998 16.104004,15.776998z M16.104004,10.558985C19.327011,10.558985,22.057007,12.679008,22.975006,15.601004L21.118011,16.756978C20.652008,14.412986 18.584015,12.646995 16.104004,12.646995 13.580002,12.646995 11.486008,14.474997 11.067001,16.87798L9.1930084,15.730001C10.070007,12.741997,12.831009,10.558985,16.104004,10.558985z M16.028015,5.2879915C21.153015,5.2879915,25.555008,8.378993,27.476013,12.796989L25.771011,13.859C24.221008,9.9980106 20.443008,7.2719988 16.028015,7.2719988 11.586014,7.2719988 7.7890015,10.031 6.2570038,13.929984L4.5440063,12.879997C6.4450073,8.4169874,10.871002,5.2879915,16.028015,5.2879915z M16.028015,0C23.047012,5.5224518E-08,29.114014,4.0700049,32,9.9789981L30.128006,11.144982C27.639008,5.8550076 22.262009,2.1920154 16.028015,2.1920151 9.7550049,2.1920154 4.3480072,5.9020047 1.881012,11.24801L0,10.094995C2.8630066,4.1239905,8.9640045,5.5224518E-08,16.028015,0z" Stretch="Uniform" Fill="#FF000000" Width="48" Height="48" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
</Path>
</Grid>
</Viewbox>
</DataTemplate>
And now simply
<Button ContentTemplate="{StaticResource Wifi}"/>
You can use it as many times you need.

how do I load an user control in a tabcontrol

I have a user control (UserInfo.xaml) and I want to load this my main tab control.
My goal is to seprate the user control from the tab control.
I cant seem to do this in WPF
My user control looks like this.
<UserControl x:Class="AuthWiz.UserInfo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="750" d:DesignWidth="1000">
<Grid>
<Label Content="Request authorization for New User" HorizontalAlignment="Left" Margin="30,30,0,0" VerticalAlignment="Top" FontSize="20" FontWeight="Bold"/>
</Grid>
I want to load the usercontrol "userinfo" in this Tabcontrol like this.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:AuthWiz;assembly=AuthWiz" x:Class="AuthWiz.TabControl"
mc:Ignorable="d"
d:DesignHeight="750" d:DesignWidth="1000">
<Grid>
<TabControl HorizontalAlignment="Left" Height="677" Margin="10,63,0,0" VerticalAlignment="Top" Width="980" TabStripPlacement="Top">
<TabItem Header="New User">
<Grid Background="#FFE5E5E5">
<local:UserInfo /> #this does not work.
</Grid>
</TabItem>
</TabControl>
</Grid>
I recieve the following error
The tag 'UserInfo' does not exist in XML namespace 'clr-namespace:AuthWiz;assembly=AuthWiz'.

TabItem can only have one child element, therefore the following is incorrect:
<TabItem Header="New User">
<Grid Background="#FFE5E5E5"/>
<local:UserInfo /> #this does not work.
</TabItem>
Because your TabItem has a Grid, and your UserControl. To solve this problem, simply place your UserControl inside your Grid.
<TabItem Header="New User">
<Grid Background="#FFE5E5E5">
<local:UserInfo />
</Grid>
</TabItem>

Making window size the same as background image size in WPF

I am new to WPF so bear with me. I have set the background image of my window using an ImageBrush and now I want my window's size to be exactly the size of the background image. The obvious solution to this is to simply set the width/height property manually with the pixel measurements of my background image, but this seems too naive. What is the best way to do this? Here is my XAML so far:
<Window x:Class="FruitFactory.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Fruit Factory" Height="576" WindowStyle="None" DataContext="{Binding}" ResizeMode="NoResize" Width="834">
<Window.Background>
<ImageBrush ImageSource="/FruitFactory;component/Graphics/FruitFactoryBackground.png"></ImageBrush>
</Window.Background>
<Window.Resources>
</Window.Resources>
<Grid>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="52,27,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" />
</Grid>
</Window>
I'm using Visual Studio 2010 and .NET 4.0

You can bind Width and Height to PixelWidth and PixelHeight of the ImageSource for ImageBrush like this
Update
Realized my previous solution didn't work because ImageSource didn't have PixelWidth/PixelHeight since it wasn't a BitmapImage. I had to use a BitmapImage resource instead but then the bindings didn't work if I didn't declare the Resource before the bindings (bug anyone?)
<Window x:Class="WindowSameSizeAsBackground.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Fruit Factory"
WindowStyle="None"
DataContext="{Binding}"
ResizeMode="NoResize">
<Window.Resources>
<BitmapImage x:Key="backgroundBrush"
UriSource="/FruitFactory;component/Graphics/FruitFactoryBackground.png"/>
</Window.Resources>
<Window.Width>
<Binding Source="{StaticResource backgroundBrush}" Path="PixelWidth"/>
</Window.Width>
<Window.Height>
<Binding Source="{StaticResource backgroundBrush}" Path="PixelHeight"/>
</Window.Height>
<Window.Background>
<ImageBrush x:Name="imageBrush"
ImageSource="{StaticResource backgroundBrush}"></ImageBrush>
</Window.Background>
<Grid>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="52,27,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="258,179,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</Window>

ImageBrush isn't best solution for such requirements, because it hasn't Width/Height properties and does not present in VisualTree (it's just a tool for rendering).
Layers will help you:
<Window>
<Grid >
<Image Stretch="Fill"
Source="***some uri***"/>
<StackPanel>
<Button Height="40"
Margin="20"
Content="Ololo"/>
</StackPanel>
</Grid>
<Window>

Categories