Does anybody know of the reason why ""could not create instance of UserControl"" error can occur. It seems to me that it occurs completely spontanous, for example after I add space after node or change tabulation. Maybe it's some kind of VS bug?
Here are controls. This configuration actually raises an error
<UserControl x:Class="ShortcutsPrototype.KeyboardShortcutsTreePanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ShortcutsPrototype="clr-namespace:ShortcutsPrototype">
<Grid Margin="3,3,3,3">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<ShortcutsPrototype:KeyboardShortcutsTreeView />
<Button Grid.Row="1" Margin="3,3,3,3" Grid.Column="1" HorizontalAlignment="Stretch">Reset</Button>
</Grid>
</UserControl>
<UserControl x:Class="ShortcutsPrototype.KeyboardShortcutsTreeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ShortcutsPrototype="clr-namespace:ShortcutsPrototype"
Height="300" Width="300">
<Grid>
<TreeView>
<TreeViewItem HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<ShortcutsPrototype:KeyboardShortcutsTreeViewEntry x:Name="generalTreeViewEntry" Title="General" />
</TreeViewItem.Header>
<TreeViewItem HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<ShortcutsPrototype:KeyboardShortcutsTreeViewEntry x:Name="generalNewFileTreeViewEntry" Title="New File" ShortcutKey="Ctrl+N" />
</TreeViewItem.Header>
</TreeViewItem>
<TreeViewItem HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<ShortcutsPrototype:KeyboardShortcutsTreeViewEntry x:Name="generalOpenFileTreeViewEntry" Title="Open File" ShortcutKey="Ctrl+O" />
</TreeViewItem.Header>
</TreeViewItem>
<TreeViewItem HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<ShortcutsPrototype:KeyboardShortcutsTreeViewEntry x:Name="generalSaveFileTreeViewEntry" Title="Save File" ShortcutKey="Ctrl+S" />
</TreeViewItem.Header>
</TreeViewItem>
<TreeViewItem HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<ShortcutsPrototype:KeyboardShortcutsTreeViewEntry x:Name="generalSaveAsFileTreeViewEntry" Title="Save File As.." ShortcutKey="Ctrl+Shift+S" />
</TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>
<TreeViewItem HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<ShortcutsPrototype:KeyboardShortcutsTreeViewEntry x:Name="debugerTreeViewEntry" Title="Debuger" />
</TreeViewItem.Header>
</TreeViewItem>
<TreeViewItem HorizontalContentAlignment="Stretch">
<TreeViewItem.Header>
<ShortcutsPrototype:KeyboardShortcutsTreeViewEntry x:Name="refactoringTreeViewEntry" Title="Refactoring" />
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
</Grid>
</UserControl>
<UserControl x:Class="ShortcutsPrototype.KeyboardShortcutsTreeViewEntry"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="25">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Label x:Name="titleLabel" Grid.Column="0"></Label>
<Label x:Name="shortcutLabel" Grid.Column="1"></Label>
</Grid>
</UserControl>
Perhaps something in your CodeBehind file is throwing an exception. Have you checked that?
I have found that visual studio has quite the difficult time with WPF user controls.
The only thing that I can see is that it seems to use the latest compiled version of a control. Usually, building the solution will fix the errors I have. Sometimes, if I have multiple projects I have to build them manually one by one.
Related
I am trying to build a help module with a treeview and the goal is to have a different view show up in the redbox based on selected treeview item. how would I go about to do that?
This is all the code I have:
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TreeView Margin="2" Width="250" HorizontalAlignment="Left" Height="auto" IsEnabled="True" FontSize="20">
<TreeViewItem Header="Introduction">
</TreeViewItem>
<TreeViewItem Header="Logging in" Margin="0,10,0,0">
<TreeViewItem Header="Changing Password" Margin="0,10,0,0"/>
</TreeViewItem>
<TreeViewItem Header="Home" Margin="0,10,0,0">
<TreeViewItem Header="Dashboard Elements" Margin="0,10,0,0"/>
<TreeViewItem Header="Parking Spots" Margin="0,10,0,0" />
<TreeViewItem Header="Docking Spots" Margin="0,10,0,0"/>
</TreeViewItem>
<TreeViewItem Header="Log Table" Margin="0,10,0,0"/>
<TreeViewItem Header="Security" Margin="0,10,0,0">
<TreeViewItem Header="Domestic Trucks" Margin="0,10,0,0"/>
<TreeViewItem Header="International Trucks" Margin="0,10,0,0"/>
</TreeViewItem>
<TreeViewItem Header="Administration" Margin="0,10,0,0" Visibility="{Binding Source={x:Static model:ViewModel.CurrentUser}, Path=IsAdmin, Converter={StaticResource My.Converter.BoolToHidden}}">
<TreeViewItem Header="Permissions" Margin="0,10,0,0"/>
<TreeViewItem Header="Editing a User" Margin="0,10,0,0"/>
<TreeViewItem Header="Adding a new company" Margin="0,10,0,0"/>
</TreeViewItem>
</TreeView>
</Grid>
I really think that this Control is not doing what you expect. I would rather use Markdown to create a help file and save it to html, pdf or xps. You can open this document when the user hits the help button. IMO it is not a good idea to "hard-code" a Help module.
But to answer your question any way, you can do it this way:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TreeView x:Name="TreeView_TOC">
<TreeViewItem Header="Chapeter 1">
<TreeViewItem.Tag>
<TextBlock Text="Your Content goes here" />
</TreeViewItem.Tag>
</TreeViewItem>
</TreeView>
<ContentControl Grid.Column="1"
Content="{Binding ElementName=TreeView_TOC, Path=SelectedItem.Tag, Mode=OneWay}"/>
</Grid>
Happy documenting
Tim
This time I am working on a help-window mini-application (to include in the other project, the imageediting application).
I have a grid with two columns and a gridsplitter inbetween. On the left I have a treeview with several nodes (set in XAML) and on the right a flowdocumentreader.
I have about 10 resourcedictionaries where I keep my documents, one for each node, that I want to display in my flowdocumentreader. I actually have no idea how to bind this! Anybody have an idea how I can do this? My code so far (only one resourcedictionary added)
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary x:Name="About" Source="About.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="500"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns"
Width="5" Background="#FFBCBCBC"/>
<TreeView Width="250" Grid.Column="0" FontFamily="Segoe UI" FontSize="16">
<TreeViewItem Header="Help">
<TreeViewItem Header="About the application"></TreeViewItem>
<TreeViewItem Header="Getting started"></TreeViewItem>
<TreeViewItem Header="Images from Flickr"></TreeViewItem>
<TreeViewItem Header="Images from the computer"></TreeViewItem>
<TreeViewItem Header="Images from the browser"></TreeViewItem>
<TreeViewItem Header="Editing">
<TreeViewItem Header="Open and Save"></TreeViewItem>
<TreeViewItem Header="Uploading"></TreeViewItem>
<TreeViewItem Header="Crop"></TreeViewItem>
<TreeViewItem Header="Resize"></TreeViewItem>
<TreeViewItem Header="Filters"></TreeViewItem>
<TreeViewItem Header="Adding text"></TreeViewItem>
<TreeViewItem Header="Remove red eyes"></TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</TreeView>
<FlowDocumentReader Grid.Column="2" >
</FlowDocumentReader>
</Grid>
You could use the Tag property of the nodes to define a string value to be loaded.
Then do a binding on the selected Node's Tag.
If you then use a converter you can load your document content from file/res.Dict or whatever:
<TreeView x:Name="documentTreeView" Width="250" Grid.Column="0" FontFamily="Segoe UI" FontSize="16">
<TreeViewItem Header="Help">
<TreeViewItem
Header="About the application"
Tag="ResDict1.xaml"></TreeViewItem>
....
<FlowDocumentReader Document="{Binding ElementName=documentTreeView, Path=SelectedItem.Tag, Converter={StaticResource stringToFlowDocumentConverter}}" Grid.Column="2" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!-- … -->
</Grid.RowDefinitions>
<TextBlock Grid.Column="0">
This should be allways visible, even if the expander isn’t expanded!
</TextBlock>
<Expander ExpandDirection="Left" Grid.Column="1">
<Expander.Header>
<!-- … -->
</Expander.Header>
<TreeView MinWidth="50"/>
</Expander>
<!-- … -->
</Grid>
I want the user to be able to resize the TreeView. I tried to warp the TreeView in a Grid with 2 columns and a GridSplitter in the first column, but that didn't work. Does anybody have an idea how to make that work?
P.S.: A XAML-only answer would be great.
You may solve your problem using Expander.Collapsed and Expander.Expanded events as Attached Event. I do not have the idea about only using Xaml now, but the following code works well in my case.
Xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid Expander.Collapsed="Grid_Collapsed" Expander.Expanded="Grid_Expanded">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!-- … -->
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" TextWrapping="Wrap">
This should be allways visible, even if the expander isn’t expanded!
</TextBlock>
<GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="2" />
<Expander Background="Yellow" ExpandDirection="Left" Grid.Column="1">
<Expander.Header>test</Expander.Header>
<TreeView MinWidth="50"/>
</Expander>
<!-- … -->
</Grid>
</Window>
Codebehinde
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private GridLength _rememberWidth = GridLength.Auto;
private void Grid_Collapsed(object sender, RoutedEventArgs e)
{
var grid = sender as Grid;
if(grid != null)
{
_rememberWidth = grid.ColumnDefinitions[1].Width;
grid.ColumnDefinitions[1].Width = GridLength.Auto;
}
}
private void Grid_Expanded(object sender, RoutedEventArgs e)
{
var grid = sender as Grid;
if (grid != null)
{
grid.ColumnDefinitions[1].Width = _rememberWidth;
}
}
}
You just need to add another column to the wrapping grid in order for it to work.
Here is a XAML sample that worked for me:
<Grid x:Name="LayoutRoot">
<toolkit:Expander ExpandDirection="Left" Header="ImLeftExpandedExpander">
<Grid ShowGridLines="True" Background="White" >
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="50" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<sdk:TreeView Background="BurlyWood">
<sdk:TreeViewItem Header="Root">
<sdk:TreeViewItem Header="bla1"/>
<sdk:TreeViewItem Header="bla2"/>
<sdk:TreeViewItem Header="bla3"/>
</sdk:TreeViewItem>
</sdk:TreeView>
<sdk:GridSplitter x:Name="grsplSplitter" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Background="Red" Width="5"></sdk:GridSplitter>
<Grid Background="#CCCC66" Grid.Column="2">
<TextBlock FontSize="22" Text="This column can be left empty, its just so the GridSplitter will have space to expand to" TextWrapping="Wrap"/>
</Grid>
</Grid>
</toolkit:Expander>
</Grid>
And the result:
Is this what you want?
Notice the GridSplitter property ResizeBehavior.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TreeView>
<TreeViewItem Header="1">
<TreeViewItem Header="2">
<TreeViewItem Header="3"/>
</TreeViewItem>
<TreeViewItem Header="3">
<TreeViewItem Header="4"/>
</TreeViewItem>
<TreeViewItem Header="5"/>
<TreeViewItem Header="6"/>
</TreeViewItem>
</TreeView>
<GridSplitter Grid.Column="1" Width="10" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
<Canvas Grid.Column="2" Background="LightGray"/>
</Grid>
Edit: Here is a working example, showing both approaches. If this is not what you want, then please say so.
<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="WpfApplication1.MainWindow"
Title="MainWindow" d:DesignWidth="516" d:DesignHeight="310">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Content="Change size of content"/>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Margin="10">
<Expander Header="Expander" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TreeView>
<TreeViewItem Header="1">
<TreeViewItem Header="2">
<TreeViewItem Header="3"/>
</TreeViewItem>
<TreeViewItem Header="3">
<TreeViewItem Header="4"/>
</TreeViewItem>
<TreeViewItem Header="5"/>
<TreeViewItem Header="6"/>
</TreeViewItem>
</TreeView>
<GridSplitter Grid.Column="1" Width="10" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
<Canvas Grid.Column="2" Background="LightGray"/>
</Grid>
</Expander>
</Border>
<Label Content="Change size of expander" Grid.Column="1"/>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1" Margin="10">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Expander>
<TreeView>
<TreeViewItem Header="1">
<TreeViewItem Header="2">
<TreeViewItem Header="3"/>
</TreeViewItem>
<TreeViewItem Header="3">
<TreeViewItem Header="4"/>
</TreeViewItem>
<TreeViewItem Header="5"/>
<TreeViewItem Header="6"/>
</TreeViewItem>
</TreeView>
</Expander>
<GridSplitter Grid.Column="1" Width="10" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>
<Canvas Grid.Column="2" Background="LightGray"/>
</Grid>
</Border>
</Grid>
</Window>
I have a window that will be a variable size, currently it is 300 x 400 as shown below.
In the top part I have an expandable tree view
In the bottom part I have a long horizontal panel with a button in it.
I want the top area (treeview) to be about 95% of the height, with the button tool area a constant 50 high.
I want these proportions to stay constant as the user expands and collapses the tree view (and as it expands below the button toolbar, I want the viewscroller to pop in with a scrollbar.
How can I do this? Here's the best I could do so far, but the button area moves up as the user collapses the tree view. :
<Window x:Class="TestSize8383.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="400">
<Window.Resources>
<Style TargetType="TreeViewItem">
<Setter Property="IsExpanded" Value="True" />
</Style>
</Window.Resources>
<DockPanel Background="Beige" Margin="3" LastChildFill="False">
<ScrollViewer DockPanel.Dock="Top" Background="White" Margin="3">
<TreeViewItem DockPanel.Dock="Top" Background="White" Header="Page 1" IsExpanded="True">
<TreeViewItem Header="Part 1">
<TreeViewItem Header="Paragraph 1">
<TreeViewItem Header="Word 1"/>
<TreeViewItem Header="Word 2"/>
</TreeViewItem>
<TreeViewItem Header="Paragraph 2">
<TreeViewItem Header="Word 1"/>
<TreeViewItem Header="Word 2"/>
</TreeViewItem>
<TreeViewItem Header="Paragraph 3">
<TreeViewItem Header="Word 1"/>
<TreeViewItem Header="Word 2"/>
</TreeViewItem>
<TreeViewItem Header="Part 2">
<TreeViewItem Header="Paragraph 1">
<TreeViewItem Header="Word 1"/>
<TreeViewItem Header="Word 2"/>
</TreeViewItem>
<TreeViewItem Header="Paragraph 2">
<TreeViewItem Header="Word 1"/>
<TreeViewItem Header="Word 2"/>
</TreeViewItem>
<TreeViewItem Header="Paragraph 3">
<TreeViewItem Header="Word 1"/>
<TreeViewItem Header="Word 2"/>
</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</ScrollViewer>
<StackPanel DockPanel.Dock="Bottom" Background="Tan" Margin="3" Height="50">
<Button Content="Previous" Margin="5"/>
</StackPanel>
</DockPanel>
</Window>
How about using a Grid instead of using a DockPanel?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
...
</ScrollViewer>
<StackPanel Grid.Row="1">
...
</StackPanel>
</Grid>
Based on the fixed layout you describe, I would use a Grid instead of DockPanel like so:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TreeView>
<!-- items excluded for brevity -->
</TreeView>
</ScrollViewer>
<StackPanel Grid.Row="1" Background="Tan" Margin="3">
<Button Content="Previous" Margin="5" />
</StackPanel>
</Grid>
You said the button must be a constant height of about 50 then immediately after that you talk about proportions? I'm not certain I understood you, but here is what I have for you in the meantime.
Make the DockPanel to have LastChildFill = True
Put the StackPanel above the ScrollViewer (first in the XAML code)
Make the ScrollViewer have VerticalScrollBarVisibility="Auto"
This will have these effects:
The button bar will always be visible
The scrollbar will pop into view when it is needed only
when I press the Maximize button on my WPF app, all the controls therein expand perfectly horizontally, but they do not expand to fill the window vertically. I figure it Maximize handles it horizontally, it should handle it vertically as well. Should I be setting a property somewhere on each control? I can catch the Resize event, but it seems like a lot of work to go through all the controls and resize them vertically only.
Thank you for your help.
FYI. I ended up changing the Height of the grid to "Auto", and then when the SizeChanged event for the Window1 fired, I set the grid Height to the e.NewSize.Height minus the ActualHeights of the controls in the StackPanel that are above it. Not how I would like it to be, but so far the only solution I found that works.
Thanks.
Can you show us some Xaml? Try setting the outer container to VerticalAlignment="Stretch"
Does the control in question shrink/grow vertically when you resize the window?
You're setting the Height attribute of the Grid to "390", which makes it fixed size vertically. If that's your "parent" control for everything else, they will key from that.
Yes, that is the control that doesn't shrink/grow vertically when I resize the window.
Since I wrote, I changed the grid height to auto, which, when I run my app, the grid, since it is the last control in the StackPanel, takes up only a portion of the remaining space in the window when it is first shown - maybe 80 of the 390. In row 0, column 0, I have a custom panel (theGraphPanel) where I draw nodes in a circle. If I draw say 20 nodes, that cell sizes appropriately, even to take up the entire screen when it is maximized. This somewhat solves the problem, although the vertical scrolling doesn't work because I believe it thinks it has infinite height.
I would like the grid to show up on the screen the way it does when I set the size to 390 - the first row taking up 3* the height of the remaining space and second row taking up * height. I guess what I am trying to do is simulate a MDI set up. I want the proportions to stay the same when I first start the app (800 x 600) and then when I maximize it. From what I can tell, unless the grid cells have content, they will stay at a minimum size and grow to whatever size the content is when the overall grid height is set to "Auto". Perhaps I am trying to do something that is not possible.
Thanks for the answers so far.
The preview window cuts off some of the XAML, but shows up in the answer text box OK. Let me know if it comes across OK or not. The VerticalAlignment="Stretch" doesn't help.
<Window x:Class="MainScreen.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MainScreen"
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
xmlns:dg="http://schemas.microsoft.com/wpf/2008/toolkit"
WindowStartupLocation="CenterScreen"
Title="Nodes" Height="600" Width="800"
>
<!-- The "toolkit" namespace above is for the data grid control. It's reference is WPFToolkit. -->
<Window.CommandBindings>
<CommandBinding Command="{StaticResource LineTopologyCommand}" Executed="OnLineTopology" />
<CommandBinding Command="{StaticResource PointToPointTopologyCommand}" Executed="OnPointToPointTopology" />
<CommandBinding Command="{StaticResource PointToMultiPointTopologyCommand}" Executed="OnPointToMultiPointTopology" />
<CommandBinding Command="{StaticResource MultiToMultiTopologyCommand}" Executed="OnMultiToMultiTopology" />
<CommandBinding Command="{StaticResource CesTopologyCommand}" Executed="OnCESTopology" />
<CommandBinding Command="{StaticResource AllTopologyCommand}" Executed="OnAllTopology" />
</Window.CommandBindings>
<StackPanel VerticalAlignment="Stretch">
<r:Ribbon Name="mRibbon" DockPanel.Dock="Top">
<r:Ribbon.Resources>
<r:RibbonGroupSizeDefinitionCollection x:Key="ViewLayout">
<r:RibbonGroupSizeDefinition>
<!-- Control sizes: L,L,L -->
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
<r:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True"/>
</r:RibbonGroupSizeDefinition>
</r:RibbonGroupSizeDefinitionCollection>
</r:Ribbon.Resources>
<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu>
<r:RibbonApplicationMenu.Command>
<r:RibbonCommand
Executed="OnCloseApplication"
LabelDescription="Application Button"
SmallImageSource="Images/SEL.ico"
LargeImageSource="Images/SEL.ico"
ToolTipTitle="SEL Network Management System"
ToolTipDescription="" />
</r:RibbonApplicationMenu.Command>
</r:RibbonApplicationMenu>
</r:Ribbon.ApplicationMenu>
<r:Ribbon.QuickAccessToolBar>
<r:RibbonQuickAccessToolBar CanUserCustomize="True">
</r:RibbonQuickAccessToolBar>
</r:Ribbon.QuickAccessToolBar>
<r:RibbonTab Label="View" MouseLeftButtonUp="RibbonTab_View_MouseLeftButtonUp">
<r:RibbonTab.Groups>
<r:RibbonGroup GroupSizeDefinitions="{StaticResource ViewLayout}">
<r:RibbonGroup.Command>
<r:RibbonCommand LabelTitle="Topology"/>
</r:RibbonGroup.Command>
<r:RibbonButton Command="{StaticResource LineTopologyCommand}"/>
<r:RibbonButton Command="{StaticResource PointToPointTopologyCommand}" />
<r:RibbonButton Command="{StaticResource PointToMultiPointTopologyCommand }" />
<r:RibbonButton Command="{StaticResource MultiToMultiTopologyCommand }" />
<r:RibbonButton Command="{StaticResource CesTopologyCommand }" />
<r:RibbonButton Command="{StaticResource AllTopologyCommand }" />
</r:RibbonGroup>
</r:RibbonTab.Groups>
</r:RibbonTab>
<r:RibbonTab Label="Home" MouseLeftButtonUp="RibbonTab_Home_MouseLeftButtonUp">
</r:RibbonTab>
<r:RibbonTab Label="Device Designer">
</r:RibbonTab>
<r:RibbonTab Label="Network Design">
</r:RibbonTab>
</r:Ribbon>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Center">
<StackPanel.Resources>
<Style x:Name="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="theBorder" BorderBrush="Gray" BorderThickness="2"
CornerRadius="10" Padding="5" Background="{TemplateBinding Background}">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="theBorder" Property="BorderBrush" Value="#333333"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="theBorder" Property="Background" Value="#CCCCCC"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Label Content="Number of Nodes"/>
<TextBox x:Name="NumNodes" HorizontalAlignment="Right" Margin="0,0,6.71,0" Width="30"/>
<Slider
x:Name="uiScaleSlider"
Width="78"
HorizontalAlignment="Left"
VerticalAlignment="Top"
ToolTip="Determines the UI scale factor."
Height="27"
Value=".1" Minimum=".5" Maximum="5"
Orientation="Horizontal"
Ticks="1"
IsSnapToTickEnabled="False"
TickFrequency="1"
TickPlacement="BottomRight"
AutoToolTipPlacement="BottomRight"
AutoToolTipPrecision="2" />
<Button Name="AddNodes" Content="Add Nodes" Margin="0,0,10,0"/>
<Button Name="Clear" Content="Clear" Margin="0,0,5,0"/>
</StackPanel>
<Grid VerticalAlignment="Stretch" x:Name="mainGrid" Margin="2,5,0,0" Height="390" Background="WhiteSmoke">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="0" Grid.RowSpan="2" Width="5" ResizeDirection="Columns" Grid.ColumnSpan="1" Height="Auto" ResizeBehavior="BasedOnAlignment" VerticalAlignment="Stretch"/>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<local:Graph x:Name="theGraphPanel" Background="#FFE7CEBF" Grid.Column="0" Grid.Row="0" Margin="2,2,2,2">
<local:Graph.LayoutTransform>
<ScaleTransform
CenterX="0" CenterY="0"
ScaleX="{Binding Path=Value, ElementName=uiScaleSlider}"
ScaleY="{Binding Path=Value, ElementName=uiScaleSlider}"
/>
</local:Graph.LayoutTransform>
</local:Graph>
</ScrollViewer>
<TabControl x:Name="mTabControl" Grid.Column="1" Grid.RowSpan="2" Margin="3,0,0,2">
<TabItem Name="Item1" Header="Circuit">
<TreeView>
<TreeViewItem Header="Ring1">
<TreeViewItem Header="Site 1">
<TreeViewItem Header="Node 1">
Data (#113)
</TreeViewItem>
<TreeViewItem Header="Node 2">
Data (#114)
</TreeViewItem>
<TreeViewItem Header="Node 3">
Data (#115)
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Site 2">
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="Ring 2">
<TreeViewItem Header="Site 2">
<TreeViewItem Header="Node 1">
Data (#7)
</TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</TreeView>
</TabItem>
<TabItem Name="Item2" Header="Inventory"></TabItem>
</TabControl>
<GridSplitter Grid.Row="1" ResizeDirection="Rows" ResizeBehavior="BasedOnAlignment" HorizontalAlignment="Stretch" Name="GridSplitter1" Height="5" VerticalAlignment="Top" />
</Grid>
</StackPanel>
</Window>
Why not just use nested grids
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="33"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="3"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="2" Grid.Row="0"
Height="Auto" Width="Auto" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<Grid Grid.Column="0" Margin="4,10,2,0" Grid.Row="0" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource HeaderText}" FontSize="13" >Templates</TextBlock>
<ListBox Grid.Column="0" Grid.Row="1" FontSize="13" >
<ListBoxItem>
Blank
</ListBoxItem>
<ListBoxItem>
New from existing...
</ListBoxItem>
</ListBox>
</Grid>
<ListView Grid.Column="1" Style="{StaticResource MyView}" Grid.Row="0" Margin="2,10,2,0">
<ListViewItem>item1</ListViewItem>
</ListView>
<ListView Grid.Column="3" Style="{StaticResource MyView}" Grid.Row="0" Margin="2,10,4,0">
<ListViewItem>item1</ListViewItem>
</ListView>
<WrapPanel Grid.Row="1" Grid.Column="3" HorizontalAlignment="Right">
<Button Height="22" Width="60">Create</Button>
<Button Height="22" Width="60">Cancel</Button>
</WrapPanel>
</Grid>