We Keep Coding

Bind visibility of a LayoutAnchorable to a checkable MenuItem

C#, WPF. I would like to show/hide AvalonDock panels using checkable menu items. Although I could do this using _Click events I believe it would be good practice to use binding instead and that it should be possible to achieve this entirely using XAML.
I suspect that the answer should be along the lines of this one and have based my attempt on one of the answers given there.
This code compiles and runs, but there is no link between the menu being checked and the anchorable pane being visible. The key line is this:
<MenuItem Header="Panel" Name="PanelVisible" IsCheckable="True" IsChecked="{Binding Path=testAnchorable.IsVisible, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
How can I get this working?
<Window x:Class="TestAvalon.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:dock="http://schemas.xceed.com/wpf/xaml/avalondock"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Menu Height="18" HorizontalAlignment="Stretch" Name="menu1" VerticalAlignment="Top" Grid.Row="0">
<MenuItem Header="View">
<MenuItem Header="Panel" Name="PanelVisible" IsCheckable="True" IsChecked="{Binding Path=testAnchorable.IsVisible, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</MenuItem>
</MenuItem>
</Menu>
<dock:DockingManager x:Name = "Dockman" DataContext = "{Binding DockManagerViewModel}"
DocumentsSource = "{Binding Documents}" DockPanel.Dock = "Left" Grid.Row = "1" >
<dock:LayoutRoot x:Name = "_layoutRoot" >
<dock:LayoutPanel x:Name = "_layoutPanel" >
<dock:LayoutAnchorablePane DockWidth="400">
<dock:LayoutAnchorable x:Name ="testAnchorable" Title = "TEST PANE" IsSelected = "True">
<TextBlock Name="tb" Text="*****"/>
</dock:LayoutAnchorable >
</dock:LayoutAnchorablePane >
</dock:LayoutPanel >
</dock:LayoutRoot >
</dock:DockingManager>
</Grid>
</Grid>

This question now has a solution here:
Binding an AvalonDock LayoutAnchorable IsVisible property
(There are two answers given there and I think they both do the job.)

Automatically set window width and height to ItemsControl Item

I have a base window which acts as a generalised container for UserControls. It works as expected, except the width and the height do not seem to be determined by the size of the child item (which with width and height set to auto, I would expect). The xaml for the base window is as follows:
<local:BaseView x:Class="Program.UI.Views.BaseWindowView"
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:Program.UI.Views"
xmlns:converters="clr-namespace:Program.UI.Converters"
xmlns:presenter="clr-namespace:Program.Presenter"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
mc:Ignorable="d"
ResizeMode="NoResize" WindowStyle="None"
d:DesignHeight="300" d:DesignWidth="300" AllowsTransparency="True">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Closing">
<presenter:EventToCommand Command="{Binding Mode=OneWay, Path=CloseWindow}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<local:BaseView.Resources>
<ResourceDictionary>
<converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<converters:SystemEventToForegroundColor x:Key="SystemEventToForegroundColor" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Program;component/UI/Templates/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</local:BaseView.Resources>
<local:BaseView.Foreground>
<SolidColorBrush Color="Black" Opacity="100"/>
</local:BaseView.Foreground>
<local:BaseView.Background>
<SolidColorBrush Color="White" Opacity="0"/>
</local:BaseView.Background>
<Border BorderBrush="#FF838383" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="1" Height="auto" Width="auto" Margin="0,0,5,5">
<Canvas Background="#E8F6F6" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="auto" Width="auto">
<Canvas.Effect>
<DropShadowEffect RenderingBias="Quality" Opacity="0.3" ShadowDepth="3" BlurRadius="4"/>
</Canvas.Effect>
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Margin="0,0,0,0" x:Name="ReferenceInfo" Canvas.Left="0" Canvas.Top="0"
Width="{Binding ActualWidth, ElementName=InfoCanvas}"
Height="{Binding ActualHeight, ElementName=InfoCanvas}"
d:DesignWidth="294"
d:DesignHeight="294">
<Grid Width="auto" Height="auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Width="auto" HorizontalAlignment="Stretch" Height="30" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" BorderBrush="#FF838383" BorderThickness="0,0,0,1" Height="30" VerticalAlignment="Top">
<Label Style="{StaticResource WindowHeaderControlTitle}" MouseDown="Label_MouseDown"/>
</Border>
<Border Grid.Column="1" BorderBrush="#FF838383" BorderThickness="1,0,0,1">
<Label Style="{StaticResource WindowHeaderControlCloseLabel}" MouseEnter="Label_MouseEnter" MouseLeave="Label_MouseLeave" MouseLeftButtonUp="Label_MouseLeftButtonUp" MouseLeftButtonDown="Label_MouseLeftButtonDown" FontSize="14" FontFamily="Segoe UI Black" FontStretch="UltraExpanded" Content="X"/>
</Border>
</Grid>
<ItemsControl Grid.Row="1" Height="auto" Width="auto" ItemsSource="{Binding ChildView}"/>
</Grid>
</DockPanel>
</Canvas>
</Border>
The view is generated on the click event of an Excel ribbon button, the code-behind for which is:
var childView = new DatapointDefinitionsView();
childView.DataContext = new DatapointDefinitionsViewModel();
ApplicationData.Presenter.ShowView<BaseWindowView>(
new BaseWindowViewModel(childView, ApplicationData.Presenter), true);
The ShowView code is:
private BaseWindowView _windowView;
public void ShowView<T>(BaseWindowViewModel viewModel, bool asModal) where T : BaseWindowView, new()
{
_windowView = new T
{
DataContext = viewModel,
ShowInTaskbar = false,
Title = viewModel.Caption,
};
//Width = viewModel.ChildView[0].Width,
//Height = viewModel.ChildView[0].Height
if (asModal)
{
_windowView.ShowDialog();
_windowView = null;
}
else
{
_windowView.Show();
}
}
Setting the width and height explicitly to the child height will set the width to the specified width, but has no effect on the height. Even if it did, however, this is not a satisfactory solution as it means the values are fixed and will not update if the usercontrol dimensions change.
Is there another way to achieve what I want?

So I was able to resolve this in the end, with all the desired functionality, as follows:
I bound the canvas height (in xaml) to the height of the DockPanel
Height="{Binding ElementName=ReferenceInfo, Path=ActualHeight}"
but the width to the ItemsControl element
Width="{Binding ElementName=ChildUserControl, Path=ActualWidth}"
I removed Height and Width from the DockPanel and re-enabled SizeToContent="WidthAndHeight" window attribute as per #lokusking earlier suggestion.
In order to enable CanResizeWithGrip functionality (and have the content of the child usercontrol dynamically resize accordingly) I hooked into the window SizeChanged event and added the following code:
private void BaseView_SizeChanged(object sender, SizeChangedEventArgs e)
{
var window = sender as Window;
if (ChildUserControl.HasItems)
{
var chlidControl = ChildUserControl.Items[0] as UserControl;
var context = (BaseWindowViewModel)window.DataContext;
// Ignore the first 3 resize events - these occur on view generation
if (!context.InitialResizeComplete)
if (context.ResizeOperations < 3)
{
context.ResizeOperations++;
return;
}
context.InitialResizeComplete = true;
// Subtract all fixed size elements from window dimensions
chlidControl.Width = window.ActualWidth - (OuterBorder.BorderThickness.Left + OuterBorder.BorderThickness.Right + OuterBorder.Margin.Right + OuterBorder.Margin.Left);
chlidControl.Height = window.ActualHeight - (OuterBorder.BorderThickness.Top + OuterBorder.BorderThickness.Bottom + OuterBorder.Margin.Top + OuterBorder.Margin.Bottom + TaskBarGrid.Height);
}
}
I've yet to determine what drives the initial 3 resize operations. My first guess was initialisation, then x, then y - but on reflection it could possibly be 1 for the baseview, 1 for the basewindow and 1 for the usercontrol. If that's the case then attached usercontrols that themselves have multiple views could prove problematic using this approach, but I've yet to test.
Hope somebody can find this useful, and thanks to those who offered help.

Reference a WPF Control added to a StackPanel

This is a problem I've been trying to solve for a couple of days but I'm yet to find a good solution.
I have a main WPF window which contains a StackPanel. I also have a class called "MessageManagement" which contains a List of custom WPF controls called "MessagePreview".
MessagePreview
<UserControl x:Class="FinalYearProject.MessagePreview"
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="58" d:DesignWidth="254" Background="White" BorderThickness="1" BorderBrush="#FF320000">
<Grid Name="grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" MaxWidth="50" MinWidth="50" />
<ColumnDefinition Width="197*" MinWidth="20" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Name="grid2">
<Grid.RowDefinitions>
<RowDefinition Height="31*" />
<RowDefinition Height="34*" />
<RowDefinition Height="33*" />
</Grid.RowDefinitions>
<Label Content="-ERROR-" Height="28" HorizontalAlignment="Left" Margin="2,1,0,0" Name="senderLabel" VerticalAlignment="Top" Foreground="#FF0000B4" Grid.RowSpan="2" />
<Label Content="-ERROR-" Height="33" HorizontalAlignment="Left" Name="previewLabel" VerticalAlignment="Top" Margin="-1,17,0,0" Grid.RowSpan="3" />
<Label Content="-Error-" Grid.Row="1" Height="28" HorizontalAlignment="Left" Margin="0,16,6,0" Name="timeLabel" VerticalAlignment="Top" Grid.RowSpan="2" Width="196" />
</Grid>
<Grid Name="grid3">
<Grid.RowDefinitions>
<RowDefinition Height="29*" />
<RowDefinition Height="27*" />
</Grid.RowDefinitions>
<Image Height="38" HorizontalAlignment="Center" Margin="3,0,6,20" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" Width="41" Source="/FinalYearProject;component/Images/twitter-bird-light-bgs.png" Grid.RowSpan="2" />
<CheckBox Height="16" Margin="15,0,22,6" Name="checkBox" VerticalAlignment="Bottom" Grid.Row="1" IsChecked="False" />
</Grid>
</Grid>
MessageManagement
List<MessagePreview> unread = new List<MessagePreview>();
public bool messagesLocked()
{
foreach (MessagePreview m in unread)
{
if ((bool)m.checkBox.IsChecked)
return true;
}
return false;
}
MainWindow C#
MessageManagement messageManagement;
MessagesPanel1 is a blank StackPanel inside MainWindow
if (!messageManagement.messagesLocked())
{
foreach (Message m in messageManagement.getListOfMessages()
{
MessagesPanel1.Children.Add(m)
}
}
When you add the custom control to the StackPanel it creates a duplicate of the original, which means changing a value on the controls in the StackPanel does not affect the controls in my MessageManagement List.
Is there a way that I can reference my original controls so that they change together? I looked into DataBinding but I'm not sure if that's the right area.

Again, You do not make a List of UI elements in WPF. You use an ItemsControl and set its ItemTemplate Property to whatever UI you need to represent your items:
<ItemsControl ItemsSource="{Binding Messages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- Everything you placed in your usercontrol, or else an instance of your usercontrol itself -->
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

If saying "change" you mead a data, inside WPF you never and ever need to access UI elements directly, as they are subject to change. What you have to do is to read the data bound to them. With correct databinding setupped on that controls you will have always updated information.
Accessing UI elements is never easy, but except that, it's completely unreliable way to access your data, as the way control is injected into the VisualTree may be changed, so your code will fail on next update.
For example on how to architect that can have a look here:
WPF Data Binding Examples

How to make a control dock in a wpf

I'm trying to make my menu bar fill the screen horizontally like a menu bar should look. When I run the program the window is set to maximize already but the menu bar only fills half the screen on top. I'm not sure how to fix this. So just to be clear I'm trying to make my controls fit to appearance based on the size of the window.
Heres the code:
<Window x:Class="WpfApplication3.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" xmlns:my="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Royale" WindowStyle="ThreeDBorderWindow" SizeToContent="Manual" WindowState="Maximized" xmlns:my1="clr-namespace:System;assembly=mscorlib">
<Window.Resources>
<my1:Double x:Key="Width1">500</my1:Double>
</Window.Resources>
<Grid ShowGridLines="False" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Menu Height="23" HorizontalAlignment="Left" Name="menu1" VerticalAlignment="Top" Width="503" IsMainMenu="True" Grid.ColumnSpan="2">
<MenuItem Header="File" HorizontalContentAlignment="Stretch">
<MenuItem Header="New">
<MenuItem Header="New Camper" />
</MenuItem>
</MenuItem>
<MenuItem Header="Edit" />
<MenuItem Header="View" />
<MenuItem Header="Add" />
</Menu>
</Grid>
</Window>

Using DockPanel:
http://www.wpftutorial.net/DockPanel.html
<DockPanel LastChildFill="True">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>

The simple answer - set your menu to use Grid.ColumnSpan="3", since you have 3 columns.
However, I would recommend nesting your "main" grid inside of a DockPanel or a second Grid (with 2 rows). This way, as you add content (ie: add new columns to your grid), you won't have to constantly adjust your menu to compensate.

AvalonDock document binding

I'm using AvalonDock (link) to create my application. I have a toolbar and a documentpane (VisualStudio like) and each new document contains a textbox. And now I'd like to add an Undo button to my toolbar which will undo changes on the textbox wich is placed on the selected document.It's completely same like it's in Visual Studio.
What I'd like to accomplish is answered here but with TabControl and Tabs.
MyCode:
<Window x:Class="_app.MainWindow"
xmlns:my="clr-namespace:_app"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock"
xmlns:osc="clr-namespace:OpenSourceControls;assembly=DockPanelSplitter"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<!--...Menu And Toolbars -->
<ToolBarPanel Grid.Row="1" Width="Auto" HorizontalAlignment="Stretch" >
<ToolBar>
<Button Command="Undo">Undo</Button>
</ToolBar>
</ToolBarPanel>
<ad:DockingManager x:Name="dockManager" Grid.Row="2">
<ad:ResizingPanel Orientation="Vertical">
<ad:ResizingPanel Orientation="Horizontal">
<ad:DockablePane ad:ResizingPanel.ResizeWidth="150">
<ad:DockableContent x:Name="inputContent" Title="Workspace">
<!-- some dockable windows -->
</ad:DockableContent>
</ad:DockablePane>
<!-- here are added the new Documents-->
<ad:DocumentPane Name="mainDocPane" ItemsSource="{Binding ..Don't know..}">
<ad:DocumentPane.ItemContainerStyle>
<Style TargetType="ad:DocumentContent">
<Setter Property="Content" Value="{Binding Content}"/>
</Style>
</ad:DocumentPane.ItemContainerStyle>
</ad:DocumentPane>
</ad:ResizingPanel>
</ad:ResizingPanel>
</ad:DockingManager>
</Grid>
I create new document windows like this:
private void NewDocument_Click(object sender, RoutedEventArgs e)
{
string title = "Document" + (dockManager.Documents.Count+1).ToString();
var doc = new Document() { Title = title };
doc.Show(dockManager);
doc.Activate();
}
And the document class looks like this:
public partial class Document : AvalonDock.DocumentContent
{
public Document()
{
InitializeComponent();
}
}
XAML:
<ad:DocumentContent x:Class="_ap.Document"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:osc="clr-namespace:OpenSourceControls;assembly=DockPanelSplitter"
xmlns:ad="clr-namespace:AvalonDock;assembly=AvalonDock">
<DockPanel>
<TextBox Name="input" AcceptsReturn="True" />
</DockPanel>
So I'd like to apply the same mechanism from the link above on this code.
Thanks for any help.

See the ApplicaionCommands.Undo
Once you tie your Undo button to the in place command which comes with the .NET FW, when the TextBox has focus the undo will take place without you having to do anything.