We Keep Coding

Wrappanel children not streching while resize the window

I am a beginner in using WPF and try to create a responsive application. I read many blogs and websites about the responsive design possibilities in WPF. Now I try to create a sample form. Please see the below image to find element structure in my form.
In this image first red box layout was maximized window and the second one was the resized or small screen layout
Red box is main container grid and it have to column (column definition)
Blue Boxes are two children of the main grid ( first blue box is a grid and second is wrappanel )
Green boxes in side the second blue box are the child elements of the wrap panel.
I am try to when I resize the window I need to change wrap panel contents like above image. I mean wrappanel orientation is horizontal, child contents are arranged in newline if the space not available on the right side.
please see the sample code below.
<Window x:Class="ResponsiveWPFApp.Responsive"
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:ResponsiveWPFApp"
mc:Ignorable="d"
Title="Responsive" Height="450" Width="800">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="400*"/>
</Grid.ColumnDefinitions>
<Grid Background="Yellow">
</Grid>
<WrapPanel x:Name="wrPanel" Background="Aqua" Grid.Column="1" Orientation="Horizontal" ItemWidth="Auto">
<WrapPanel.Children>
<Grid x:Name="gd1" Height="400" Width="Auto" HorizontalAlignment="Stretch" Background="Black" >
<TextBlock>terdf</TextBlock>
</Grid>
<Grid x:Name="gd2" Height="400" Width="Auto" Background="Green" >
<TextBlock >sdfdf</TextBlock>
</Grid>
</WrapPanel.Children>
</WrapPanel>
</Grid>
</Grid>
</Window>
In my code wrap panel contains two child elements, it's not filled the wrap panel available space.

You must decide: either you need to stretch the children, or you need WrapPanel. These are mutually exclusive options. The main purpose of the WrapPanel is to transfer the children to the next line (column) if they do not fit in the current line. If each child is stretched horizontally (vertically) to the limit, then each line will always have one child, and the functionality of the WrapPanel will lose its meaning. If you need to stretch children, you should use a Grid or UniformGrid. Here is an example of code with Grid in which children are stretched:
<Window x:Class="ResponsiveWPFApp.Responsive"
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:ResponsiveWPFApp"
mc:Ignorable="d"
Title="Responsive" Height="450" Width="800">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="400*"/>
</Grid.ColumnDefinitions>
<Grid Background="Yellow">
</Grid>
<Grid x:Name="grid" Background="Aqua" Grid.Column="1" VerticalAlignment="Top" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="gd1" Height="400" HorizontalAlignment="Stretch" Background="Black" >
<TextBlock>terdf</TextBlock>
</Grid>
<Grid Grid.Column="1" x:Name="gd2" Height="400" Background="Green" >
<TextBlock >sdfdf</TextBlock>
</Grid>
</Grid>
</Grid>
</Grid>
</Window>
UniformGrid is a hybrid WrapPanel and Grid. Here is code snipet with UniformGrid:
<Window x:Class="ResponsiveWPFApp.Responsive"
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:ResponsiveWPFApp"
mc:Ignorable="d"
Title="Responsive" Height="450" Width="800">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="400*"/>
</Grid.ColumnDefinitions>
<Grid Background="Yellow">
</Grid>
<UniformGrid x:Name="grid" Background="Aqua" Grid.Column="1" Rows="1" VerticalAlignment="Top" >
<Grid x:Name="gd1" Height="400" HorizontalAlignment="Stretch" Background="Black" >
<TextBlock>terdf</TextBlock>
</Grid>
<Grid x:Name="gd2" Height="400" Background="Green" >
<TextBlock >sdfdf</TextBlock>
</Grid>
</UniformGrid>
</Grid>
</Grid>
</Window>
Take account on Rows="1" for the UniformGrid. Number of Rows is fixed for the UniformGrid. WrapPanel may have different number of rows.

How to "punch a hole" in a WPF window [duplicate]

This question already has answers here:
Create a transparent hole inside a window's background - WPF
(2 answers)
Closed 3 years ago.
Im starting with WPF now, and I dont know if its possible, but it should be.
Im trying to create a fully transparent area in my form, deleting all the contents inside a rectangle (Those contents will be a AxWindowsMediaPlayer, as Shown below), and be able to see whats behind my window.
Its possible in WinForms using TransparencyKey and a Panel, but WinForms doesnt fill my needs for this project.
Example:
Another example:

this should do the trick for you:
<Window
[...]
Title="MainWindow" MinHeight="200" MinWidth="400" WindowStyle="None" AllowsTransparency="True">
<Window.OpacityMask>
<ImageBrush
ViewportUnits="RelativeToBoundingBox"
TileMode="None"
ImageSource="/Images/rect.png"
/>
</Window.OpacityMask>
<!-- many many controls-->
</Window>
WindowStyle need to be none
AllowTransparency needs to be true
And the image source is just a image with a rectagular transparent part in center. You could also draw this dinamically!
result:

<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"
Title="MainWindow" Height="450" Width="800"
WindowStyle="None"
Opacity="0.1"
AllowsTransparency="True">
</Window>
Make WindowStyle="None" and AllowsTransparency="True" to get transparent window. vary opacity to get amount of transparency

Got something like this.
<Window x:Class="WpfApp3.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="450" Width="800" WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="#66FFFFFF" Grid.Column="0" Grid.RowSpan="3"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="2" Grid.RowSpan="3"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="1" Grid.Row="0"/>
<Rectangle Fill="#66FFFFFF" Grid.Column="1" Grid.Row="2"/>
<Rectangle x:Name="workingRectangle" Fill="Transparent" Stroke="Red" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Window>

Masking is probably the closest substitute to Windows Forms' TransparencyKey.

How to get WPF Window to autosize to content and no more

I have a dialog containing 2 TextBlocks, a Progress Bar and a cancel Button.
Here is the XAML:
<Window x:Class="WpfApplication4.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:WpfApplication4"
mc:Ignorable="d"
Title="MainWindow" Height="Auto" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="txtFirst" Grid.Row="0" Margin="5" TextWrapping="Wrap">This is a really really really really long string that wraps</TextBlock>
<TextBlock x:Name="txtSecond" Grid.Row="1" Margin="5" Text="A Shorter string" TextWrapping="Wrap" MaxWidth="200"/>
<ProgressBar x:Name="prgProgress" Grid.Row="2" Margin="5" Height="20" />
<Button x:Name="btnCancel" Grid.Row="3" Margin="5" Height="25" Width="50"/>
</Grid>
</Window>
I would like the Window not to have a fixed height but auto adjust its height based on the size of its children and no more, but can’t see a way to do this. At the moment when I don’t assign anything to the Window’s height, it seems to adopt a height that is much bigger that the content.
Not sure why, or where it gets height value from? If I set Windows Height = “Auto” I get the same thing. All the heights for the RowDefinitions are set to “Auto”, which I take to mean ‘set row height to be row child height’.

You need to use SizeToContent property, check the msdn link.
Example:
<Window 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"
…
SizeToContent="WidthAndHeight">

Different position between designer view and compiled build

In my first attempts to work with WPF I encountered a problem where coordinates that I choose in designer's view for buttons are different in what I see when I compile my program. Here's how it looks like:
Buttons are a little bit lower (cropped) in compiled version. Any ideas on what is happening here?
Code:
<Window
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" x:Class="Player.MainWindow"
Title="Player" ResizeMode="CanMinimize" StateChanged="Window_StateChanged" Icon="Resources/radio.ico" WindowStartupLocation="Manual" Closing="Window_Closing" Left="0" d:DesignWidth="448" d:DesignHeight="110" Width="448" Height="110">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="nextButton" Content="Next" HorizontalAlignment="Left" Margin="32,38,0,0" VerticalAlignment="Top" Width="45" Click="nextButton_Click" Height="22"/>
<TextBox x:Name="prevButton" HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="209" IsEnabled="False" TextAlignment="Center"/>
</Grid>
</Window>

I opened up GIMP and put your images on top of each other, with the top of having 50% transparency and this is the result:
And voila - the XAML designer and the compiled output is identical. I would even assume that VS designer displays some sort of background-compiled version of your XAML to achieve this high-fidelity representation.
Back to your edited question: according to this question: Why is a window larger in runtime? you need to set the width/height on the Grid and set the SizeToContent attribute of the Window to WidthAndHeight.
Here is an updated version of your code:
<Window (...)
SizeToContent='WidthAndHeight'>
<Grid
Height='110'
Width='448'
Margin="0">
(...)
And the result is:

How to anchor a wpf data grid which is inside a stack panel a fixed distance from the main window's four corners

I have the following wpf layout given to me by my employer. It makes use of multiple nested stack panels.
I'm trying to anchor a data grid which is inside a stack panel a fixed distance away from the main window's four corners. And whenever the grid contains data of which some of it is hidden because of the parent window's size, it is supposed to display scroll bars which must disappear if not needed.
I set the data grid's and the stack panel's width to Auto so that it fills the width and that makes the horizontal and vertical scroll bars behave as i want them to. BUT the grid doesn't have the required height.
But when i try to set the data grid's height property to auto both the horizontal and vertical scroll bars disappear resulting in hidden data.
I tried setting the data grids height property to a fixed size and updating it whenever the window is resized but the scroll bars are still hidden how can i fix this?
<UserControl x:Class="WpfApplication1.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="441" d:DesignWidth="300">
<Grid>
<StackPanel Margin="0" Name="stackPanel1">
<ListBox Height="100" Name="listBox1" Width="253" />
<Button Content="Button" Height="23" Name="button1" Width="256" Click="button1_Click" />
<StackPanel Name="stackPanel2">
<StackPanel Height="34" Name="stackPanel3" Width="249" />
<DataGrid AutoGenerateColumns="False" Name="dataGrid1" Height="282" />
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WpfApplication1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfApplication1.MainWindow"
Title="MainWindow" Height="502" Width="525" StateChanged="Window_StateChanged">
<Grid Margin="0">
<my:UserControl1 x:Name="userControl11" Loaded="userControl11_Loaded" />
</Grid>
</Window>

I don't understand all this StackPanel inside StackPanel stuff. You should simply use Grid for your layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListBox Grid.Row="0" Height="100" Name="listBox1" Width="253" />
<Button Grid.Row="1" Content="Button" Height="23" Name="button1" Width="256" />
<StackPanel Grid.Row="2" Height="34" Name="stackPanel3" Width="249" />
<DataGrid Grid.Row="3" AutoGenerateColumns="False" Name="dataGrid1" />
</Grid>
And having an empty StackPanel stackPanel3 as spaceholder seems awkward. Thats what WPF elements have a Margin property for.

When you put items into a vertical StackPanel they like to pretend they have infinite vertical space. Switch over to specifying rows on your Grid, and place your DataGrid in one of those rows. When it's inside a Grid it knows how much space it has available and should show the scrollbars appropriately.