Develop Reference

AppWindow Size not matching expected values - WinUI

I made a method that will allow me to lock the size of any Windows in my application. The method itself works perfectly, however when I pass in the fixed size of my XAML content, it doesn't render properly. As you can see from the XAML, the canvas size is locked at 725x305. However, when I pass those values into my method, the AppWindow cuts off a portion of the picture. I have to set the AppWindow closer to 925x425 to get it to show the whole background image. Is anyone able to explain to me what the difference between the XAML & AppWindow height and width? Is it possible to calculate the exact AppWindow size needed based on the content size?
What I expect the window to look like:
What it actually looks like:
<Window
x:Class="Aerloc_App.Views.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Aerloc_App.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Canvas Width="725" Height="305">
<Canvas.Background>
<ImageBrush ImageSource="../Assets/Aerloc_Logo.png"
Opacity=".75"
Stretch="Uniform"/>
</Canvas.Background>
<StackPanel Canvas.Left="400" Canvas.Top="25">
<!-- Username & Password Box -->
<TextBox PlaceholderText="Username"
Text="{x:Bind Path=ViewModel.Username, Mode=TwoWay}"
Width="300"
Opacity="1"/>
<PasswordBox PlaceholderText="Password"
PasswordChanged="{x:Bind Path=ViewModel.PasswordBox_PasswordChanged}"
KeyDown="{x:Bind Path=ViewModel.PasswordBox_KeyDown}"
Width="300"
Margin="0,8,0,8"
Opacity="1"/>
<!-- Error Notification Window -->
<TextBlock Text="{x:Bind Path=ViewModel.ErrorMessage, Mode=OneWay}"
Foreground="GhostWhite"
FontWeight="ExtraBold"
Width="300"
TextAlignment="Right"/>
</StackPanel>
</Canvas>
public void SetWindowSize(Window window, int width, int height, bool isResizable = true)
{
IntPtr hWnd = WinRT.Interop.WindowNative.GetWindowHandle(window);
var windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(hWnd);
var appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);
var presenter = appWindow.Presenter as OverlappedPresenter;
appWindow.Resize(new Windows.Graphics.SizeInt32 { Width = width, Height = height });
presenter.IsResizable = isResizable;
presenter.IsMaximizable = isResizable;
}

Resize WPF application until remain only the window bar

It's a way to modify the height on the window until remains only the window bar? Right now I use to set the height of the window to 0 BUT still remain some content above the window bar (that white and gray area), I want to remove this completely and leave only the window bar:
I use MVVM so binding is needed:
XAML:
Width="{Binding MainWindowWidthSize, Mode=TwoWay}"
Height="{Binding MainWindowHeightSize, Mode=TwoWay}"
C#
public void TriggerFloatingMode(object obj)
{
if (!_isFloatingModeEnabled)
{
MainWindowWidthSize = 500;
MainWindowHeightSize = 0;
_isFloatingModeEnabled = true;
}
else
{
MainWindowWidthSize = 1000;
MainWindowHeightSize = 560;
_isFloatingModeEnabled = false;
}
}

Add this code WindowStyle="None" in the Window tag and enter the following code at the bottom of the Window tag
<Window.Resources>
<Style TargetType="{x:Type local:MainWindow}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CornerRadius="0" GlassFrameThickness="0" ResizeBorderThickness="2" CaptionHeight="0"></WindowChrome>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
In the above code, change TargetType="{x:Type local:MainWindow}" to the name of your window local: your window name

An easy solution with your code could be
<Window x:Class="YourWindow.MainWindow"
SizeToContent="WidthAndHeight">
<Grid Height="{Binding MainWindowHeightSize }" Width="{Binding MainWindowWidthSize }">
</Grid>
</Window>

How to create WPF image SVG from Resource in code c#?

I converted image svg to xaml, next I save it in string resource "printer".
From code-behind I want to create this image /printer.svg now printer.xaml/ and add it to Canvas as child.
Please help me how to do it the best in c# code?
Thank you
Piotr
I do something wrong...
string resVal = Resource1.ResourceManager.GetString("printer");
UserControl u = new UserControl();
u.DataContext = resVal;
Canvas.SetLeft(u, 150);
Canvas.SetTop(u, 150);
front_canvas.Children.Add(u);
And my printer.svg converted to xaml
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="358" Width="368">
<Viewbox Stretch="Fill" Width="107.9580078125" Height="107.9580078125">
<Canvas Width="407.9580078125" Height="407.9580078125">
<Canvas>
<Canvas>
<Canvas>
<Path Fill="Black" StrokeThickness="1" Data="F1M84.979,307.916L33.153,307.916C14.873,307.916,0,293.04,0,274.756L0.197,149.068C0.197,130.794,15.075,115.917,33.363,115.917L60.479,115.917C64.897,115.917 68.479,119.499 68.479,123.917 68.479,128.335 64.897,131.917 60.479,131.917L33.363,131.917C23.898,131.917,16.197,139.617,16.197,149.081L16,274.768C16,284.218,23.695,291.916,33.153,291.916L84.979,291.916C89.397,291.916 92.979,295.498 92.979,299.916 92.979,304.334 89.397,307.916 84.979,307.916z"/>
..............

Suppose an .svg image is converted to the .xaml format, "decorated" with an user control and saved to the application resources.
String resource name: UserControl1
String resource value:
<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"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid Margin="10">
<Path x:Name="shape1" Stretch="Fill" Fill="BlueViolet" StrokeThickness="1"
Data="m 187.906,186.34 c 1.282,7.861 2.571,15.76 3.859,23.646 3.836,23.54 7.629,46.766 11.073,67.894 7.675,47.046 13.162,80.674 13.162,80.674 -0.751,-0.653 -1.489,-1.316 -2.232,-1.967 0.139,0.857 0.275,1.721 0.414,2.586 1.056,0.94 2.117,1.88 3.187,2.822 0.733,-1.112 1.451,-2.23 2.184,-3.338 -0.145,-0.865 -0.296,-1.73 -0.435,-2.593 -0.516,0.776 -1.022,1.555 -1.535,2.338 0,0 -5.566,-33.659 -13.357,-80.744 -3.496,-21.139 -7.338,-44.378 -11.237,-67.929 -1.211,-7.313 -2.422,-14.64 -3.629,-21.935 7.294,1.208 14.619,2.421 21.933,3.631 23.552,3.898 46.79,7.74 67.931,11.237 47.084,7.792 80.743,13.355 80.743,13.355 -0.782,0.514 -1.564,1.018 -2.34,1.536 0.863,0.14 1.729,0.291 2.598,0.436 1.105,-0.731 2.223,-1.452 3.337,-2.184 -0.945,-1.071 -1.885,-2.131 -2.825,-3.188 -0.864,-0.139 -1.727,-0.275 -2.588,-0.413 0.653,0.743 1.317,1.479 1.971,2.232 0,0 -33.628,-5.486 -80.677,-13.164 -21.127,-3.442 -44.352,-7.234 -67.891,-11.074 -7.887,-1.286 -15.787,-2.574 -23.646,-3.858" />
</Grid>
</UserControl>
The following code demonstrate how load the user control from resources and add it to the main window:
// MainWindow.xaml.cs
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Xml;
namespace LoadFromXamlDynamically
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
StringReader stringReader = new StringReader(Properties.Resources.UserControl1);
using (XmlReader xmlReader = XmlReader.Create(stringReader))
{
var control = (UserControl)System.Windows.Markup.XamlReader.Load(xmlReader);
LayoutRoot.Children.Add(control);
}
}
}
}
MainWindow.xaml
<Window ...>
<Grid x:Name="LayoutRoot">
</Grid>
</Window>

Change color from another class is not working

I try to change the color of a canvas by pressing a button using command binding insted of click event to avoid any code behind in the MyView.xaml.cs file. The command is fireing and the messageboxes show the correct color code values before and after changing it so the new color is set but the color of the canvas do not change. If a use a click event and the code behind in the MyView.xaml.cs insted than all work fine but I would like to get it work wiht command bindning and without code behind in the MyView.xaml.cs file. How can I do that and what is that I am not doing right?
MainWindow.xaml
<Window x:Class="WpfApp1.MainWindow"
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:View="clr-namespace:WpfApp1.View"
xmlns:ViewModel="clr-namespace:WpfApp1.ViewModel"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Background="YellowGreen"
WindowStartupLocation="CenterScreen">
<Window.DataContext>
<ViewModel:MyClass/>
</Window.DataContext>
<View:MyView/>
</Window>
MyView.xaml file
<UserControl x:Class="WpfApp1.View.MyView"
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:ViewModel="clr-namespace:WpfApp1.ViewModel"
xmlns:View="clr-namespace:WpfApp1.View">
<Canvas Name="MainCanvas" Height="300" Width="502" Background="#FF148B63">
<Button Name="ChangeColorButton" Command="{Binding CommandChangeColor}" Content="new color" Height="25" Width="55" Margin="225,268,225,10"/>
</Canvas>
</UserControl>
MyClass.cs
public class MyClass : MyView
{
List<Color> _listOfColors = new List<Color>();
public MyClass(){ MyInitColor(); }
public ICommand CommandChangeColor
{
get { return new MyCommand(ChangeColor); }
}
public void ChangeColor()
{
MessageBox.Show("Color before: " + MainCanvas.Background.ToString());
Random rnd = new Random();
int i = rnd.Next(_listOfColors.Count - 1);
MainCanvas.Background = new SolidColorBrush(_listOfColors[i]);
MessageBox.Show("Color after: " + MainCanvas.Background.ToString());
}
}

Since you can have many instances of a UserControl, how would MyClass know which instance of MainCanvas it should be updating?
So similar to your binding for CommandChangeColor you should also bind the Background to some property in MyClass. Something like:
Xaml:
<Canvas Name="MainCanvas" Height="300" Width="502" Background="{Binding BackGroundColor}">
<Button Name="ChangeColorButton" Command="{Binding CommandChangeColor}" Content="new color" Height="25" Width="55" Margin="225,268,225,10"/>
</Canvas>
MyClass.cs
public SolidColorBrush BackGroundColor {get;set;}
public void ChangeColor()
{
MessageBox.Show("Color before: " + MainCanvas.Background.ToString());
Random rnd = new Random();
int i = rnd.Next(_listOfColors.Count - 1);
BackGroundColor = new SolidColorBrush(_listOfColors[i]);
MessageBox.Show("Color after: " + MainCanvas.Background.ToString());
}
You will probably also want to implement INotifyPropertyChanged.

WPF - How to make Window opacity to white

I want to make the window have the effect can change the whole window which has many elements evenly to white, as the window behind in the picture:
I use code like
public MainWindow()
{
this.Opacity = 0.5;
}
but it change to black
How to make it whole evenly change to white even when there're many Element in the Window and don't set the window Style to none?(Because set Window AllowTransparent seems have to set the Style to none at the same time)
I hope can using code to do it, because I want to do it dynamically.
(Or possibly it use UserControl but not Window to achieve this effect? maybe the UserControl use with the Window and set the UserControl to Transparent can do it
----After I try, I find UserControl doesn't have property AllowTransparent, so it seems imposible use this way )

Basically, you have two options:
Use white Background color on Window and change Opacity on the window children, so the white starts to shine through
<Window Background="White">
<Grid Opacity="{Binding WhiteOutVisibility}" Background="WhiteSmoke">
<YourContent/>
</Grid>
</Window>
Use a white overlay control with alpha or Opacity that lets the actual content shine through
<Grid>
<YourContent/>
<Border Background="#80ffffff" Visibility="{Binding WhiteOutVisibility}"/>
</Grid>
In my opinion, you should use a white overlay if you want to block user interaction with the window content and white background if you want to continue user interaction.

If you need to fade only the client area, you can just put overlay - some empty semitransparent control over all the content on the window.

You can achieve this effect by laying a canvas over your window, and setting the background to white and an opacity value. Some xaml like this will work. Just change the UserControl for Window.
<UserControl x:Class="View.UserControl1"
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="40" d:DesignWidth="100">
<Grid>
<TextBox Text="Hello there" />
<!-- this will show faintly -->
<Canvas Background="White" Opacity="0.8"></Canvas>
</Grid>
</UserControl>
This xaml looks like this:

The Window type has property AllowsTransparency. You can find it property on your window properties in MSVisualStudio. This can solve your problem.

Thanks for Phillip Ngan and grek40 s' answer,
both Grid and Canvas with background white and opacity works,
I write some test code that can show the effect
Xaml Part
<Window x:Class="WPFAbitraryTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button Grid.Row="0" Background="Blue" Foreground="White" FontSize="20" Click="SwitchOpacity_OnClick">Clcik to SwitchOpacity</Button>
<Button Grid.Row="1" Background="ForestGreen">hi2</Button>
<ListBox Grid.Row="2" Background="Orange">
<ListBoxItem>ListBox Item #1</ListBoxItem>
<ListBoxItem>ListBox Item #2</ListBoxItem>
<ListBoxItem>ListBox Item #3</ListBoxItem>
</ListBox>
<!-- <Grid Grid.Row="1" Grid.RowSpan="2" Opacity="0.9" Background="WhiteSmoke"/> -->
<Canvas Name="WhiteMaskCanvas" Grid.Row="1" Grid.RowSpan="2" Background="White" Opacity="0.5"></Canvas>
</Grid>
</Window>
.
Class Part
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void SwitchOpacity_OnClick(object sender, RoutedEventArgs e)
{
int opacityVal = 0;
Task.Factory.StartNew(() =>
{
for (int i = 0; i <= 1000; i++)
{
int j = 0;
Thread.Sleep(100);
//Use ++ % to change Opacity
this.Dispatcher.Invoke(
DispatcherPriority.SystemIdle,
new Action(() =>
{
WhiteMaskCanvas.Opacity = ++opacityVal % 10 / 10.0;
}));
////Use Abs Cosine to Change Opacity
//this.Dispatcher.Invoke(
// DispatcherPriority.SystemIdle,
// new Action(() =>
// {
// WhiteMaskCanvas.Opacity =
// Math.Abs(Math.Sin(++opacityVal*0.1)) ;
// }));
}
});
}
}
.
The Result:
.
further code,
if want to make the canvas mask whole window, you can change the canvas to
<Canvas Name="WhiteMaskCanvas" Grid.Row="0" Grid.RowSpan="3" Background="White" Opacity="0.5"></Canvas>
and add code to class:
public MainWindow()
{
InitializeComponent();
WhiteMaskCanvas.Visibility = Visibility.Collapsed;
}
private void SwitchOpacity_OnClick(object sender, RoutedEventArgs e)
{
WhiteMaskCanvas.Visibility = Visibility.Visible;
int opacityVal = 0;
Task.Factory.StartNew(() =>
{
//below same as code above