Say I have the following controls (that I want to put in a Data Template):
<Rectangle Width="20" Height="20" Stroke="Black"/>
<Ellipse Width="15" Height="15" Stroke="Red" StrokeThickness="4"/>
I would like the circle to be centered exactly in the middle of the square.
Seems easy, but I am just not figuring how to do it. Everything I try is off to one side or the other by a bit.
Update:
This is my latest attempt that did not work:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="3"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Width="20" Height="20" Stroke="Black"/>
<Ellipse Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="15" Stroke="Red" StrokeThickness="3"/>
</Grid>
It is the closest I can get.
If you have an even-length and an odd-length shape, they can never be perfectly aligned. Like a 2-unit line and a 3-unit line, they'll always be slightly off:
---
--
So could I suggest making them both even-length, or both odd-length?
<Grid>
<Rectangle Width="20" Height="20" Stroke="Black"/>
<Ellipse Width="16" Height="16" Stroke="Red" StrokeThickness="4"/>
</Grid>
Related
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>
I want to implement it like the picture above.
<Grid>
<Border BorderThickness="1" BorderBrush="#eeeeee" Height="200" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="#55a0c4">
<TextBlock Text="묘도대교 PY1 탑정부" Padding="6" Foreground="White"/>
</Border>
<Border Grid.Column="1" Background="White" Margin="0 0 0 0">
<Path Stroke="#55a0c4" StrokeThickness="1" Stretch="Fill" Margin="0 4 0 0">
<Path.Data>
<LineGeometry StartPoint="1,0" EndPoint="0,1" />
</Path.Data>
</Path>
</Border>
<Border Background="#55a0c4" Grid.Column="2" VerticalAlignment="Top" Height="5"/>
</Grid>
</Border>
</Grid>
The above picture and code are embodied by me, but I cannot fill the background only in the above margin. What should I do?
You just need a different geometry. Instead of drawing a line, draw a triangle. This will fill most of the area you want. Then you just need to also include a rectangle to fill the space above the triangle. Here's a version of your code that does what you want:
<Border BorderThickness="1" BorderBrush="#eeeeee" Height="200" Width="300">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="#55a0c4">
<TextBlock Text="묘도대교 PY1 탑정부" Padding="6" Foreground="White"/>
</Border>
<Border Grid.Column="1" Background="White" Margin="0 0 0 0">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Path Fill="#55a0c4" Stretch="Fill" Margin="0 5 0 0" Data="M 0,0 H 1 L 0,1 Z"/>
<Rectangle Fill="#55a0c4" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
</Grid>
</Border>
<Border Background="#55a0c4" Grid.Column="2" VerticalAlignment="Top" Height="5"/>
</Grid>
</Border>
Looks like this:
Please note that I also added SnapsToDevicePixels="True" to the parent Grid element. This is necessary to inhibit antialiasing that would result in faint gaps between the graphical elements.
I also used the "Path Markup Syntax" to define the triangle, instead of building the Path object's data with explicit XAML elements. I find this much more concise, if sometimes not as readable.
Using Kaxaml, resizing from the left works as expected.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="5" Background="DarkGray" HorizontalAlignment="Right"></GridSplitter>
<Rectangle Grid.Column="0" Fill="Red" Height="100"/>
<Rectangle Grid.Column="1" Fill="Yellow" Height="100"/>
<Rectangle Grid.Column="2" Fill="Green" Height="100"/>
</Grid>
</Grid>
</Page>
However when trying something similar on the right it behaves very differently.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="5" Background="DarkGray" HorizontalAlignment="Left"></GridSplitter>
<Rectangle Grid.Column="0" Fill="Red" Height="100"/>
<Rectangle Grid.Column="1" Fill="Yellow" Height="100"/>
<Rectangle Grid.Column="2" Fill="Green" Height="100"/>
</Grid>
</Grid>
</Page>
Oddly only dragging right works and the size happens in an almost inverse manner.
For the first column change Width="*" to Width="Auto".
I'm using WPF's wrappanel. the problem is that in the right side of it there's an empty space that I would like to reduce and I don't know how.
in the pic below you can see the right against the left side margin, I would like them both to be like the left one.
This is my XAML:
<Grid x:Name="root">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="263*" />
<ColumnDefinition Width="240*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="LightBlue"/>
<WrapPanel >
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
</WrapPanel>
</Grid>
It looks like you forgot to center the WrapPanel in the Column. Like this:
<Grid x:Name="root">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="263*" />
<ColumnDefinition Width="240*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="LightBlue"/>
<WrapPanel HorizontalAlignment="Center">
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
<Rectangle Margin="10" Fill="Red" Width="40" Height="40"></Rectangle>
</WrapPanel>
</Grid>
You're getting the big space at the end because it can only fit so many squares in the space you've assigned it. It can't quite fit the last square in to the first line so it wraps it. That chunk of space on the right is just the extra "dead" space.
The other thing you can do with a WrapPanel is specify how big the item is going to be. You'll see I've used the ItemHeight and ItemWidth properties, this gives me more control over how it is sized.
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="263*" />
<ColumnDefinition Width="280*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="LightBlue"/>
<WrapPanel ItemHeight="60" ItemWidth="60" >
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
<Rectangle Margin="5" Fill="Red" Width="60" Height="60"></Rectangle>
</WrapPanel>
</Grid>
I have a WPF Window that has a custom border, Thumb controls for resizing, and a two-column layout. The right column (main content area) is a UserControl with a ScrollViewer, so it scrolls as needed. I want to add a ScrollViewer to the left column, but when I do, at runtime it gives me
Initialization of 'System.Windows.Controls.Primitives.ScrollBar' threw an exception.
with an inner exception of
Unable to cast object of type 'MS.Internal.NamedObject' to type 'System.Windows.FrameworkTemplate'.
If I take the ScrollViewer out, everything works fine again.
Here's the basic XAML (with the ScrollViewer wrapped around the TaskPane ItemsControl):
<Window x:Class="MyWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="525" MinWidth="200"
Height="350" MinHeight="85"
FontFamily="Segoe UI"
AllowsTransparency="True" Background="Transparent"
ResizeMode="CanResize" WindowStyle="None">
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="6"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="22"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
<TextBlock Name="Caption" Text="My Window"/>
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical">
<!-- Minimize/Maximize/Close buttons -->
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="0" Grid.Row="1">
<ItemsControl Name="TaskPane">
...
</ItemsControl>
</ScrollViewer>
<StackPanel Name="MainContent" Grid.Column="1" Grid.Row="1" Orientation="Vertical">
...
</StackPanel>
</Grid>
</Grid>
<ResizeGrip Name="ResizeGrip" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="16" Height="16" Padding="0 0 18 18"/>
<Thumb Name="TopLeftThumb" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNWSE" DragDelta="TopLeftThumb_DragDelta"/>
<Thumb Name="TopThumb" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Opacity="0" Cursor="SizeNS" DragDelta="TopThumb_DragDelta" />
<Thumb Name="TopRightThumb" Grid.Column="2" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNESW" DragDelta="TopRightThumb_DragDelta"/>
<Thumb Name="LeftThumb" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" DragDelta="LeftThumb_DragDelta" />
<Thumb Name="RightThumb" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" DragDelta="RightThumb_DragDelta" />
<Thumb Name="BottomLeftThumb" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNESW" DragDelta="BottomLeftThumb_DragDelta"/>
<Thumb Name="BottomThumb" Grid.Column="1" Grid.Row="2" VerticalAlignment="Bottom" Opacity="0" Cursor="SizeNS" DragDelta="BottomThumb_DragDelta" />
<Thumb Name="BottomRightThumb" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0" Cursor="SizeNWSE" DragDelta="BottomRightThumb_DragDelta"/>
</Grid>
</Border>
I've searched online, but can find anything on this. I've tried creating another UserControl with a ScrollViewer as the layout root, and get the same error.
By any chance do you have a ScrollViewer style defined in any of your resources somewhere? I saw this link which may be related: http://blog.alner.net/archive/2010/05/07/wpf-style-and-template-resources_order-matters.aspx
The error usually occurs when one style uses a 2nd style, but that 2nd style gets added after the 1st one does. Rather hard error to diagnose.
Don't know if this is the issue, but you didn't set the row and column of the 'StackPanel' after 'ScrollViewer'.