WPF Unwanted margin around path - wpf

I am trying to create my own symbol of square root which will be resizing automatically according to its content. Similar to the one at https://www.symbolab.com. I use XAML in WPF.
At the moment, the square root symbol looks like this:
The problem is the space between the first column and the second column of the grid, which both contain the path element using those I draw the root icon.
There is the small space that is making the line discrete (noncontinuous).
I am unable to make it disappear. It seems like the Path element creates it.
Is there anything I can do about it? I will also accept any other ideas how to create the required element (the square root symbol).
Here's the code:
<UserControl x:Class="GUICalculator.View.CustomTextBox"
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:GUICalculator.View"
mc:Ignorable="d"
d:DesignHeight="35" d:DesignWidth="40"
Background="White">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="TrackSurface" Margin="5,5,0,5">
<Path Stretch="Fill" Stroke="Black" StrokeThickness="2"
Data="M0,10 L 5,14 L 14,0 L 15, 0">
</Path>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Path VerticalAlignment="Bottom" Grid.Row="0" Height="6" HorizontalAlignment="Stretch" Stretch="Fill" Stroke="Black" StrokeThickness="2"
Data="M 0,50 L 100,50">
</Path>
<TextBox Grid.Row="1" Margin="3" Text="4" />
</Grid>
</Grid>
Edit: I managed to work around the problem by setting negative margin to the path. I believe there still might be a better solution though.
Edit As #Clemens suggested in the comments, there are properties that can be set on path element: StrokeStartLineCap="Square" and StrokeEndLineCap="Square". It works as expected.

Related

WPF, XMAL percentage spacing gets calculated all wrong

In short
My understanding is, by using the * in xaml you should get "fixed" percentages. However, even when adding two grids to an control with the exact same Row- and Columndefinitions the calculations seem to be different.
tl;dr
What I wish to do
I wanted to create a user control with a canvas or button to open a color picker. Whilst designing that control I stumbled across a problem I cannot explain myself.
The left hand side of the control should be nearly a complete mirrored copy of the right hand side with a small difference: the very outer lines should differ in their appearance slightly. Whilst the left line should be short, the right one should drop to the very bottom of the control in order to encapsulate a textblock.
My approach
In order to achieve this, I have created a "main" grid to host the three elements (Left hand design grid, center control to open the color picker and right hand grid). Ive added the center control encapsulated by a grid, just to stay consistent with my approaches for the left and right hand side.
Moving on, I have added two grids for the mentioned left and right hand side and gave them the exactly same Row- and Columndefinitions. Thinking that would do the trick, I have added a few lines to add the wished designed to the control.
The problem
I've soon noticed, that the two horizontal lines did not match up. The lines had a few pixels in between so I have tried playing around with the layout to find out, what causes that problem.
The 'solution'
It seems like everything seems to behave correctly, except for the most right hand line. Whenever its Grid.RowSpan is set to 4, meaning it will stretch to the bottom of the control, it messes with the spacing of the percentages. Out of some reason I cannot fathom it seems to change the percentages calculated by the Grid.RowDefinitions
Simply setting the Grid.ColumnSpan="4" to Grid.ColumnSpan="3" for the right most line does fix the spacing, changing the Grid.ColumnSpan="4" to Grid.ColumnSpan="3" on the most outer left line would also change the spacing correctly.
A new problem
This attempt does obviously fix the spacing but does introduce a new problem: the design of the user control with either of the two fixes has changed. Either both lines have to be dropped to the very bottom of the control or both lines have to be short.
And I really wish for the two lines to differ slightly. Furthermore, the two vertical lines at the center do not seem to affect the spacing negatively at all, even though they span the discussed rows as well.
Another solution?
I've simply went ahead and changed all lines to be canvases with a black background color. That does fix the issue and everything is presented correctly. But yet I am sitting here, not understanding why that problem has occurred in the first place. I wish to understand what may have caused the changed the calculation of percentages to improve my knowledge on designing UIs with XAML.
However, the controls preview seems to work now, but when "consumed" by another control (meaning I've added that control to another control) it seems like the entire spacing is all wrong again, just as it was when I've used lines.
A new culprit
Upon playing around I've noticed when removing the textbox the spacing would be correct again, even when consumed by another control. Still, my problem here is to understand how that could be an issue even though the percentages should all be the same, leaving no room for the horizontal lines to differ.
Naturally I wondered whether the negative margin could cause the error (that is there in order for the TextBlock to move closer to the line). But with or without margin, the error still consists.
A more general question
I know, general question on best approaches and practices are not very welcomed here, but please let me ask at least about resources on how to design well written Controls with XAML. All I've read the past weeks helped me a great lot, and yet I seem to stumble across many problems on a regularly basis.
I cannot tell you where I've read this on the Microsoft docs site, but it clearly stated that one should try to avoid the use of canvases. Maybe I've misunderstood, however, it does seem to me like using a canvas here seems to be a cheap trick to avoid a simple problem I've had with the lines.
Furthermore, if anyone has any idea on how to change the controls layout in order to achieve the desired output please let me know. Thank you in advance for even taking the time to read through this.
Resources
User-control with lines
Problem: Displaying the horizontal lines slightly off
<UserControl ...
mc:Ignorable="d" d:DesignHeight="50" d:DesignWidth="400"
MinHeight="50">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="54"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- left hand side grid-->
<Grid Grid.Column="0"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Line Grid.Column="0" Grid.ColumnSpan="1"
Grid.Row="1" Grid.RowSpan="3"
X1="0" X2="0"
Y1="0" Y2="1"
Stroke="Black"
StrokeThickness="1"
Stretch="Uniform"
SnapsToDevicePixels="True"/>
<Line Grid.Column="0" Grid.ColumnSpan="3"
Grid.Row="2" Grid.RowSpan="1"
X1="0" X2="1"
Y1="0" Y2="0"
Stroke="Black"
StrokeThickness="1"
Stretch="Uniform"
SnapsToDevicePixels="True"/>
<Line Grid.Column="2" Grid.ColumnSpan="1"
Grid.Row="0" Grid.RowSpan="5"
X1="0" X2="0"
Y1="0" Y2="1"
Stroke="Black"
StrokeThickness="1"
Stretch="Uniform"
SnapsToDevicePixels="True"/>
</Grid>
<!-- middle grid -->
<Grid Grid.Column="1"
Grid.Row="0">
<Canvas Margin="2, 0"
Background="Red"/>
</Grid>
<!-- right hand side grid-->
<Grid Grid.Column="2"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Line Grid.Column="0" Grid.ColumnSpan="1"
Grid.Row="0" Grid.RowSpan="5"
X1="0" X2="0"
Y1="0" Y2="1"
Stroke="Black"
StrokeThickness="1"
Stretch="Uniform"
SnapsToDevicePixels="True"/>
<Line Grid.Column="0" Grid.ColumnSpan="3"
Grid.Row="2" Grid.RowSpan="1"
X1="0" X2="1"
Y1="0" Y2="0"
Stroke="Black"
StrokeThickness="1"
Stretch="Uniform"
SnapsToDevicePixels="True"/>
<Line Grid.Column="2" Grid.ColumnSpan="1"
Grid.Row="1" Grid.RowSpan="4"
X1="0" X2="0"
Y1="0" Y2="1"
Stroke="Black"
StrokeThickness="1"
Stretch="Uniform"
SnapsToDevicePixels="True"/>
<TextBlock Grid.Column="1"
Grid.Row="3" Grid.RowSpan="2"
Text="Prefered Color"
FontSize="20"
FontFamily="Segoe UI Light"
Typography.Capitals="SmallCaps"
Foreground="Black"
HorizontalAlignment="Right"
Margin="4, -3, 4, 0"/>
</Grid>
</Grid>
</UserControl>
User-control as displayed in designer with horizontal lines being off
User-control with Canvases
Problem: Seems to work in the preview but will be miscalculated when added to another control
<UserControl ...
mc:Ignorable="d" d:DesignHeight="50" d:DesignWidth="400"
MinHeight="50">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="54"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- left hand side grid-->
<Grid Grid.Column="0"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Canvas Grid.Column="0" Grid.ColumnSpan="1"
Grid.Row="1" Grid.RowSpan="3"
Background="Black"
SnapsToDevicePixels="True"/>
<Canvas Grid.Column="0" Grid.ColumnSpan="3"
Grid.Row="2" Grid.RowSpan="1"
Background="Black"
SnapsToDevicePixels="True"/>
<Canvas Grid.Column="2" Grid.ColumnSpan="1"
Grid.Row="0" Grid.RowSpan="5"
Background="Black"
SnapsToDevicePixels="True"/>
</Grid>
<!-- middle grid -->
<Grid Grid.Column="1"
Grid.Row="0">
<Canvas Margin="2, 0"
Background="Red"/>
</Grid>
<!-- right hand side grid-->
<Grid Grid.Column="2"
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Canvas Grid.Column="0" Grid.ColumnSpan="1"
Grid.Row="0" Grid.RowSpan="5"
Background="Black"
SnapsToDevicePixels="True"/>
<Canvas Grid.Column="0" Grid.ColumnSpan="3"
Grid.Row="2" Grid.RowSpan="1"
Background="Black"
SnapsToDevicePixels="True"/>
<Canvas Grid.Column="2" Grid.ColumnSpan="1"
Grid.Row="1" Grid.RowSpan="4"
Background="Black"
SnapsToDevicePixels="True"/>
<TextBlock Grid.Column="1"
Grid.Row="3" Grid.RowSpan="2"
Text="Prefered Color"
FontSize="20"
FontFamily="Segoe UI Light"
Typography.Capitals="SmallCaps"
Foreground="Black"
HorizontalAlignment="Right"
Margin="4, 0, 4, 0"/>
</Grid>
</Grid>
</UserControl>
User-control with canvases instead of lines being displayed correctly in designer
User-control displayed wrong after being added to another control
I will post this as an answer, since it fulfills the neccessary design needs, and mark it as an correct answer for the time beeing. However, this answer does not statisfy my question completly since it does not explain why the previous approach didnt work.
Therefore feel free to add answers and I will choose the answer wich explains the issue as the correct one.
<UserControl ...
mc:Ignorable="d" d:DesignHeight="50" d:DesignWidth="400"
MinHeight="50">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="1"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="3"
Grid.Row="0" Grid.RowSpan="5"
Margin="4,0"
Background="Red"
BorderThickness="0"
Command="{Binding ColorClick}">
</Button>
<TextBlock Grid.Column="5"
Grid.Row="4" Grid.RowSpan="2"
Text="Prefered Color"
FontSize="20"
FontFamily="Segoe UI Light"
Typography.Capitals="SmallCaps"
Foreground="Black"
HorizontalAlignment="Right"
Margin="4, 0, 4, 0"/>
<Canvas Grid.Column="0"
Grid.Row="1" Grid.RowSpan="3"
Background="Black"/>
<Canvas Grid.Column="1"
Grid.Row="2" Grid.RowSpan="1"
Background="Black"/>
<Canvas Grid.Column="2"
Grid.Row="0" Grid.RowSpan="5"
Background="Black"/>
<Canvas Grid.Column="4"
Grid.Row="0" Grid.RowSpan="5"
Background="Black"/>
<Canvas Grid.Column="5"
Grid.Row="2" Grid.RowSpan="1"
Background="Black"/>
<Canvas Grid.Column="6"
Grid.Row="1" Grid.RowSpan="5"
Background="Black"/>
</Grid>
</UserControl>

How to get this window layout in WPF?

im trying to create a Window with the following layout:
Layout http://www.x-toolz.com/downloads/layout.jpg
As you can see the window has 3 rows (15*, 70*, 15*) and 3 columns (same).
How can I redesign a rectangle to fit the geometry of the corners?
If it can't be done with rectangles i would need another control that I can place content (Grid, StackPanel) in.
Any Ideas?
Thanks in advance!
MemphiZ
You could do that with a grid with 9 cells. Create 8 usercontrols to hold your outside content. If you want it size adjustable, you are going to have to work a little magic.
Each corner user control would have a 2x2 grid and for the upper left panel I will give a small example.
<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:ec="http://schemas.microsoft.com/expression/2010/controls"
mc:Ignorable="d"
x:Class="TopLeft"
x:Name="UserControl"
d:DesignWidth="480" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Rectangle Stroke="Black" Grid.RowSpan="2" Fill="Black"/>
<Rectangle Fill="Black" Stroke="Black" Grid.ColumnSpan="2"/>
<Path Grid.Column="1" Data="M0.5,0.5 L239.5,0.5 120,120 0.5,239.5 z" Fill="Black" Grid.Row="1" Stretch="Fill" Stroke="Black" />
</Grid>
</UserControl>
In the above example a 2 x 2 grid, with a diagonal path in the bottom right. If your main window is going to resize you will have to decide whether or not your border areas will resize accordingly or be a static frame around the body of the window.
Here is the window:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MegaPanel"
x:Class="MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"/>
<RowDefinition Height="0.3*"/>
<RowDefinition Height="0.3*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.3*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<local:TopLeft Margin="0"/>
</Grid>
</Window>
I failed to put a Content presenter in the UserControl, but you would put that in there to add content to it.
The body area of the window would have to be handled with some care. You can set the Margin to negative values to allow the contents of the body to spill out into the frame areas.
Edit
Example:
<local:TopLeft Margin="0">
<local:TopLeft.Tag>
<ListBox/>
</local:TopLeft.Tag>
</local:TopLeft>
The above change to Top left assigns the ListBox to the Tag property of the TopLeft usercontrol. In the User control, I bound the ContentPresenter to the Tag Property of the UserControl. ListBox is assigned to the tag, ContentPresenter gets the ListBox from the Tag. Of you can regester custom properties in the UserControl codebehind if you want things in several areas.
<ContentPresenter Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,0,125,125" Content="{Binding Tag, ElementName=UserControl}"/>
For registering custom DependencyProperties check this post out.
<Window x:Class="WpfApplication2.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 Height="15*" />
<RowDefinition Height="15*" />
<RowDefinition Height="40*" />
<RowDefinition Height="15*" />
<RowDefinition Height="15*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*" />
<ColumnDefinition Width="15*" />
<ColumnDefinition Width="40*" />
<ColumnDefinition Width="15*" />
<ColumnDefinition Width="15*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Blue">
<!-- Top Left Content Goes Here -->
</Grid>
<Grid Grid.Column="2" Grid.Row="0" Background="Aqua">
<!-- Top Middle Content Goes Here-->
</Grid>
<Grid Grid.Column="3" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Gold">
<!-- Top Right Content Goes Here -->
</Grid>
<Grid Grid.Column="0" Grid.Row="2" Background="Magenta">
<!-- Middle LEft Content goes here -->
</Grid>
<Grid Grid.Column="4" Grid.Row="2" Background="Lime">
<!-- Middle Right Content goes here -->
</Grid>
<Grid Grid.Column="0" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Red">
<!-- Bottom Left Content Goes Here -->
</Grid>
<Grid Grid.Column="2" Grid.Row="4" Background="DarkGoldenrod">
<!-- Bottom Middle Content Goes Here-->
</Grid>
<Grid Grid.Column="3" Grid.Row="3" Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Silver">
<!-- Bottom Right Content Goes Here -->
</Grid>
<!-- This is used to shape the center" -->
<Polygon x:Name="main" Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Fill="White" Points="0,15 15,0 55,0 70,15 70,55 55,70 15,70 0,55" Stretch="Fill" StrokeThickness="0"/>
<Grid Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Background="Pink" >
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=main}" />
</Grid.OpacityMask>
<!-- Centre Content Goes Here-->
</Grid>
</Grid>
</Grid>
</Window>
This produces this layout. The limitation is that WPF does its bounds clipping to rectangles so any content that overflows the regions will be made invisible (i.e. Clipped).
You could partially work around this by applying padding to each grid element to a create a rectangular area that fits inside each region.

Viewbox containing a TextBlock seems to have minimum height

I'm trying to build a UI layout in WPF that can scale with the size of the window. The idea is to have a number of controls on the left, a number of controls on the right, and in the middle, have a line of text. It's OK if the line of text is cropped on the right. The main thing is that the aspect ratio of all of the controls is maintained.
That part is working fine. The problem is that the center line of text seems to have a minimum height; below this height, it will start clipping vertically. I want the text to keep shrinking if I make the window very thin. Even manually setting the FontSize on the TextBlock doesn't work.
Note that the controls on the left and right do not have a minimum width; they can shrink indefinitely.
My XAML is here. I'm using .NET 4.0.
<Window x:Class="TestWpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="75" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Stretch="UniformToFill" Margin="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">A</Button>
<Button Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">B</Button>
<Button Grid.Column="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">C</Button>
<Button Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">D</Button>
</Grid>
</Viewbox>
<Viewbox VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Stretch="UniformToFill" Margin="2">
<TextBlock>Here is a bunch of text that may prove to be interesting.</TextBlock>
</Viewbox>
<Viewbox Grid.Column="2" Stretch="UniformToFill" Margin="2">
<Button HorizontalAlignment="Center">X</Button>
</Viewbox>
</Grid>
</Window>
The problem is that you like the Viewbox clipping when it occurs horizontally but don't want any clipping vertically. In other words, you want UniformToFill until the horizontal clipping stops and then you want to switch to Uniform.
To get both of these behaviors you need an alternative to Viewbox. A while ago I wrote a prototype of just such a layout element in this Stack Overflow answer called ViewboxPanel:
Making a Viewbox scale vertically but stretch horizontally
I just tested it, and at least for your sample XAML, I think it does just what you want:
<local:ViewboxPanel VerticalAlignment="Top" HorizontalAlignment="Left" Grid.Column="1" Margin="2">
<TextBlock>Here is a bunch of text that may prove to be interesting.</TextBlock>
</local:ViewboxPanel>

Is there a way of resizing controls in a Silverlight 4 OOB app?

I am new to Silverlight/XAML so apologies if this is an obvious question.
How can you detect when the OOB window is resized and resize your own controls to fit the new window size?
In Silverlight (regardless of OOB or not) you wouldn't normally need to detect window resizing to perform your own resizing. Using the correct panel types sorts that out for you.
For example:-
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Green" Grid.Row="0" Grid.Column="0" />
<Rectangle Fill="Red" Grid.Row="0" Grid.Column="1" />
<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="0" />
<Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1" />
</Grid>
</UserControl>
Here the four rectangles divide up the window into quarters. It may be worth your while spending a little time review the documentation for the various panel types such as Grid, Canvas and StackPanel to get a feel for how each works.

Centering a WPF control

I have a window where I add a new UserControl to (with an image), I simply want to center the control in the middle of the screen (both vertically and horizontally). I can only get the vertical one to work. I'm gonna swap content in the DockPanel from my CodeBehind and want to show this startup screen before I start doing my slideshow UI, this means that the content is set from the CodeBehind.
My Window:
<Window x:Class="GreenWebPlayerWPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="512" Width="853" WindowStyle="None" WindowState="Maximized" WindowStartupLocation="CenterScreen">
<DockPanel Width="Auto" Height="Auto" Name="TransitionContainer" Background="Black" Margin="0" LastChildFill="True"></DockPanel>
</Window>
My UserControl:
<UserControl x:Class="GreenWebPlayerWPF.FrontPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DockPanel Background="Black">
<Image Name="image1" Stretch="None" Source="/GreenWebPlayerWPF;component/gw.png" />
</DockPanel>
</UserControl>
Please note that I'm using maximized/full screen.
Use a Grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Replace with your UserControl -->
<Button Content="Foo" Grid.Column="1" Grid.Row="1"/>
</Grid>
You can dock it inside your DockPanel (if you must have a DockPanel there) to stretch. And, of course, while the above is all markup, you can just as easily create such a grid from code.
I keep running into this problem when trying to center elements on the page.
The problem with the StackPanel is that HorizontalAlignment has no effect when the Orientation is Horizontal and VerticalAlignment no effect when Orientation is Vertical. So you keep banging your head trying to set values with no effect. It is not illogical that it works this way but it would be good if this was reported as an error.
The solution I found is to have two imbricated StackPanels one centered horizontally and the other vertically as shown below. Finding the size of the parent is needed to size the intermediate panel otherwise it would be flat and its content hidden - an absolute value would work as well. Although not a panacea itis a bit less verbose than using a grid.
<StackPanel Background="Bisque" Orientation="Vertical" Width="300" Height="300" >
<StackPanel HorizontalAlignment="Center" Orientation="Horizontal"
Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=StackPanel}, Path=ActualHeight}">
<StackPanel VerticalAlignment="Center" Width="200" Height="60" Background="Blue">
</StackPanel>
</StackPanel>
</StackPanel>
It's quite an old one, but centring a control is now as simple as:
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Height="350" Width="600">
<TextBox />
</StackPanel>
</Grid>

Resources