Set grid size to windows size - wpf

I have the following code to fit the grid exactly to the window.
As you can see in the screenshot, the grid is running out of the window on the bottom and right side. Do you guys have any idea why this is happening? and how to do it properly?
<Window x:Class="WpfApp1.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"
Topmost="true"
Background="Aqua"
WindowStartupLocation="CenterScreen"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Title="MainWindow" Height="500" Width="500">
<Grid
Width="{Binding ActualWidth, RelativeSource = {RelativeSource AncestorType = {x:Type Window}}}"
Height="{Binding ActualHeight, RelativeSource ={RelativeSource AncestorType = {x:Type Window}}}">
<Border Opacity=".9" BorderBrush="Blue" BorderThickness="2"/>
</Grid>
</Window>

If you bind the actual widths and heights of the window, the Grid will exceed the Window, as the content area is smaller than the window itself. Remove the bindings. The Grid will be sized automatically to occupy the available space if you do not explicitly set a Width and Height.
<Window x:Class="WpfApp1.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"
Topmost="true"
Background="Aqua"
WindowStartupLocation="CenterScreen"
DataContext="{Binding Main, Source={StaticResource Locator}}"
Title="MainWindow" Height="500" Width="500">
<Grid>
<Border Opacity=".9" BorderBrush="Blue" BorderThickness="2"/>
</Grid>
</Window>

Related

Change background opacity on startup

I would like to change background opacity (make it darker) when programs starts
<Window x:Class="PCSX4.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:PCSX4"
mc:Ignorable="d"
Title="MainWindow" Height="900" Width="900"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
Background="Transparent">
<WindowChrome.WindowChrome>
<WindowChrome GlassFrameThickness="0,0,0,1" CornerRadius="0" />
</WindowChrome.WindowChrome>
<Grid>
<Border Background="lightBlue" />
<Image HorizontalAlignment="Center" Height="1002" VerticalAlignment="Center" Width="900" RenderTransformOrigin="-2.3,-0.484" Source="/background.png" Stretch="Fill"/>
</Grid>
</Window>
Haven't tried anything because I don't know how to solve this problem as I'm new to this.

How to make Grid with round corner in WPF

I want to make my Grid with round corner in my WPF project.
And due to some reason, I have to use ViewBox and hence to make it more difficult.
My code is as below:
<Window x:Class="WpfApp5.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:WpfApp5"
mc:Ignorable="d"
WindowStyle="None"
AllowsTransparency="True"
Background="Green"
Width="500" Height="300">
<Grid x:Name="gridTotal">
<Viewbox x:Name="vb">
<Grid Width="500" Height="300">
<Image x:Name="BlackMaskImage" Stretch="UniformToFill"/>
<Button Width="100" Height="100">
</Button>
</Grid>
</Viewbox>
</Grid>
I tries some method, like this:
How can I make a rounded-corners form in WPF?
But not work for my case.
Moreļ¼š
In my code, there are two Grid. But for me, the final appearance of the window has 4 round corner is OK. That is I don't care which Grid is fabricated.
I tried to change the gridTotal to a Border, and that border can own round corner. But its content is still a rectangle with sharp right angle.
In UWP, a Grid can apply Style with setter to set its CornerRadius, but in WPF I cannot do so.
You don't specify any region breakdown in the Grid.
Use Border instead.
<Window x:Class="WpfApp5.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"
WindowStyle="None"
AllowsTransparency="True"
Background="{x:Null}"
Width="500" Height="300">
<Border x:Name="gridTotal" CornerRadius="20"
Background="Green">
<Grid Width="500" Height="300">
<Image x:Name="BlackMaskImage" Stretch="UniformToFill"/>
<Button Width="100" Height="100">
</Button>
</Grid>
</Border>
</Window>

WPF why is TextBox in WrapPanel is cutted

XAML:
<WrapPanel>
<TextBox ScrollViewer.VerticalScrollBarVisibility="Auto" AcceptsReturn="True"/>
<TextBox ScrollViewer.VerticalScrollBarVisibility="Auto" AcceptsReturn="True"/>
</WrapPanel>
As you can see at the following picture, the second TextBox is cut after it wrapped, to second line.
Picture:
Put the WrapPanel in a ScrollViewer if you want to be able to scroll its content:
<Window x:Class="WpfApplication1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Window1" Height="300" Width="300">
<ScrollViewer>
<WrapPanel>
<TextBox Width="400"></TextBox>
<TextBox Height="500" ScrollViewer.VerticalScrollBarVisibility="Visible"></TextBox>
</WrapPanel>
</ScrollViewer>
</Window>
The WrapPanel won't automatically adopt to the size of the window.

How do I get a TabControl to use the full width of its parent in wpf?

I have a tab control inside canvas. How do I get a TabControl to use the full width of its parent?
<UserControl
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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication1.MainPage"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Canvas x:Name="LayoutRoot" Background="White" Margin="0,0,0,0">
<sdk:TabControl Width="400" Height="300" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0,0" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" >
<sdk:TabItem Header="myResponse">
<Grid Background="#FFE5E5E5"/>
</sdk:TabItem>
<sdk:TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</sdk:TabItem>
</sdk:TabControl>
Without talking about why you are using a canvas in the first place, I would recommend you read about width and height properties in WPF.
In your example, the width is set specifically to a defined amount of pixel. With this, the TabControl will not scale. You should use relative values like * and auto and work with margins where they are needed. This tutorial could be a start: http://www.c-sharpcorner.com/UploadFile/mahesh/wpf-layout-size-width-and-height/

Dock a Canvas in its parent

How can I "dock" a canvas in its parent?
I have a UserControl that contains a canvas inside.
<UserControl x:Class="MyUC"
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="300" d:DesignWidth="300">
<MyCanvas x:Name="myCanvas"
Height="???"
Width="???{Binding RelativeSource={RelativeSource TemplatedParent}}" >
</MyCanvas>
</UserControl>
I use Width and Height properties of this custom canvas inside. And need that that properties be always "bind" to the parent Container.
Try this
Width="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType=UserControl,
AncestorLevel=1},
Path=ActualWidth}"
Same goes for height
If you don't set the Width and Height properties in the Canvas it will occupy all the space available in the UserControl. Here's a simple example:
[MainWindow.xaml]
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="MainWindow" Width="500" Height="500"
x:Class="WpfApplication1.MainWindow">
<Grid Background="Blue">
<local:UserControl1 />
</Grid>
</Window>
[UserControl1.xaml]
<UserControl x:Class="WpfApplication1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Green">
<Canvas Background="Red" />
If you run this app, you'll see that the background color is red, meaning that the Canvas takes all of the space made available by the UserControl (and its parent Grid). You can also resize the window - the Canvas will follow.
<MyCanvas x:Name="myCanvas"
Width ="{Binding ElementName=myUserControl, Path=Width}"
Height="{Binding ElementName=myUserControl, Path=Height}">
</MyCanvas>

Resources