I want to bind the height of a control the sum of two other heights, so the UI looks nice various screen sizes.
<GridView
AutomationProperties.AutomationId="ItemDetails"
ItemsSource="{Binding data}"
IsSwipeEnabled="False"
SelectionMode="None" Height="{Binding Height, (ElementName=item - ElementName=itemTitle)}" >
<GridView.ItemTemplate>
<DataTemplate>
<dll:TaskItemControl/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
The above XAML is invalid, but it demonstrates what I want to do. I have two elements, item and itemTitle. item is a ScrollView that gets set to the height of the screen and I want the GridView to be the same height as the ScrollView minus the height of the itemTitle.
Is there a way to do this in XAML?
Note: The reasons for doing this are beyond the scope of this question. So please don't comment about restricting the height of a control within a ScrollView.
This can be easily done in code behind by subscribing the SizeChanged events of the two elements and update the Height of the GridView whenever the handlers are called.
But you want a pure XAML solution, and this is where Behaviors come into play.
Use a Behavior.
First you need to add Blend SDK reference to your project.
Then you need to create a new class that implements IBehavior. This class needs three dependency properties just to reference the GridView, the item and the itemTitle. So you can subscribe to their SizeChanged events and calulate the Height accordingly.
I choose to attach this behavior to a top level Panel (most likely your LayoutRoot Grid) because I want to ensure that all the elements under it are rendered properly inside its Loaded event handler.
The full Behavior class would look something like this -
public class HeightBehavior : DependencyObject, IBehavior
{
public GridView GridView
{
get { return (GridView)GetValue(GridViewProperty); }
set { SetValue(GridViewProperty, value); }
}
public static readonly DependencyProperty GridViewProperty =
DependencyProperty.Register("GridView", typeof(GridView), typeof(HeightBehavior), new PropertyMetadata(null));
public FrameworkElement FirstItem
{
get { return (FrameworkElement)GetValue(FirstItemProperty); }
set { SetValue(FirstItemProperty, value); }
}
public static readonly DependencyProperty FirstItemProperty =
DependencyProperty.Register("FirstItem", typeof(FrameworkElement), typeof(HeightBehavior), new PropertyMetadata(null));
public FrameworkElement SecondItem
{
get { return (FrameworkElement)GetValue(SecondItemProperty); }
set { SetValue(SecondItemProperty, value); }
}
public static readonly DependencyProperty SecondItemProperty =
DependencyProperty.Register("SecondItem", typeof(FrameworkElement), typeof(HeightBehavior), new PropertyMetadata(null));
public DependencyObject AssociatedObject { get; set; }
public void Attach(DependencyObject associatedObject)
{
this.AssociatedObject = associatedObject;
var control = (Panel)this.AssociatedObject;
control.Loaded += AssociatedObject_Loaded;
}
private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
{
this.FirstItem.SizeChanged += FirstItem_SizeChanged;
this.SecondItem.SizeChanged += SecondItem_SizeChanged;
// force to re-calculate the Height
this.FirstItem.Width += 0.5;
}
private void FirstItem_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.SetAssociatedObjectsHeight();
}
private void SecondItem_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.SetAssociatedObjectsHeight();
}
private void SetAssociatedObjectsHeight()
{
this.GridView.Height = this.FirstItem.ActualHeight - this.SecondItem.ActualHeight;
}
public void Detach()
{
this.FirstItem.SizeChanged -= FirstItem_SizeChanged;
this.SecondItem.SizeChanged -= SecondItem_SizeChanged;
var control = (Panel)this.AssociatedObject;
control.Loaded -= AssociatedObject_Loaded;
}
}
Then in my XAML, I attach it to my top level Grid, like this.
<Grid x:Name="LayoutRoot">
<Interactivity:Interaction.Behaviors>
<local:HeightBehavior GridView="{Binding ElementName=itemGridView}" FirstItem="{Binding ElementName=item}" SecondItem="{Binding ElementName=itemTitle}"/>
</Interactivity:Interaction.Behaviors>
Hope this helps.
Related
In short: is it correct in MVVM pattern to access main window datacontext and update it through behavior class?
long: I'm trying to learn WPF MVVM and make app where one of the functionalities is canvas with draggable ellipses. I found few examples of behaviors that could provide this functionality but they relied on TranslateTransform and this was not the solution I wanted. I want to extract the ellipse coordinates for furhter use.
I also use ItemsControl to display canvas and related items which made impossible to use Canvas.SetTop() command.
After several tries I found a working solution but I’m not sure if this is correct according to MVVM pattern. And if this is the simplest way to achieve the goal… I take up coding as a hobby
if I made some concept mistakes please let me know.
Short app description:
On app startup the instance of TestWindow2VM class is crated and assigned to main window as datacontext
TestWindow2VM class contains ObservableCollection which contains EllipseVM class.
EllipseVM class holds X,Y coordinates and some other data (brushes etc).
In XAML in ItemsControl the binding of ItemsSource is set to my ObservableCollection. In ItemsControl Datatemplate I bind ellipse properties to data stored in EllipseVM class and also add reference to my behavior class
in ItemsControl ItemContainerStyle canvas top and left properties are bound to my ObservableCollection
when ellipse is clicked my behavior class access the datacontext, finds the instance of EllipseVM class and changes X and Y coordinates basing on mouse cursor position relative to canvas.
Code below:
behavior:
public class CanvasDragBehavior
{
private Point _mouseCurrentPos;
private Point _mouseStartOffset;
private bool _dragged;
private static CanvasDragBehavior _dragBehavior = new CanvasDragBehavior();
public static CanvasDragBehavior dragBehavior
{
get { return _dragBehavior; }
set { _dragBehavior = value; }
}
public static readonly DependencyProperty IsDragProperty =
DependencyProperty.RegisterAttached("CanBeDragged",
typeof(bool), typeof(DragBehavior),
new PropertyMetadata(false, OnDragChanged));
public static bool GetCanBeDragged(DependencyObject obj)
{
return (bool)obj.GetValue(IsDragProperty);
}
public static void SetCanBeDragged(DependencyObject obj, bool value)
{
obj.SetValue(IsDragProperty, value);
}
private static void OnDragChanged(object sender, DependencyPropertyChangedEventArgs e)
{
var element = (UIElement)sender;
var isDrag = (bool)(e.NewValue);
dragBehavior = new CanvasDragBehavior();
if (isDrag)
{
element.MouseLeftButtonDown += dragBehavior.ElementOnMouseLeftButtonDown;
element.MouseLeftButtonUp += dragBehavior.ElementOnMouseLeftButtonUp;
element.MouseMove += dragBehavior.ElementOnMouseMove;
}
else
{
element.MouseLeftButtonDown -= dragBehavior.ElementOnMouseLeftButtonDown;
element.MouseLeftButtonUp -= dragBehavior.ElementOnMouseLeftButtonUp;
element.MouseMove -= dragBehavior.ElementOnMouseMove;
}
}
private void ElementOnMouseMove(object sender, MouseEventArgs e)
{
if (!_dragged) return;
Canvas canvas = Extension.FindAncestor<Canvas>(((FrameworkElement)sender));
if (canvas != null)
{
_mouseCurrentPos = e.GetPosition(canvas);
FrameworkElement fe = (FrameworkElement)sender;
if (fe.DataContext.GetType() == typeof(EllipseVM))
{
// EllipseVM class contains X and Y coordinates that are used in ItemsControl to display the ellipse
EllipseVM ellipseVM = (EllipseVM)fe.DataContext;
double positionLeft = _mouseCurrentPos.X - _mouseStartOffset.X;
double positionTop = _mouseCurrentPos.Y - _mouseStartOffset.Y;
#region canvas border check
if (positionLeft < 0) positionLeft = 0;
if (positionTop < 0) positionTop = 0;
if (positionLeft > canvas.ActualWidth) positionLeft = canvas.ActualWidth-fe.Width;
if (positionTop > canvas.ActualHeight) positionTop = canvas.ActualHeight-fe.Height;
#endregion
ellipseVM.left = positionLeft;
ellipseVM.top = positionTop;
}
}
}
private void ElementOnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_mouseStartOffset = e.GetPosition((FrameworkElement)sender);
_dragged = true;
((UIElement)sender).CaptureMouse();
}
private void ElementOnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_dragged = false;
((UIElement)sender).ReleaseMouseCapture();
}
XAML:
<ItemsControl ItemsSource="{Binding scrollViewElements}" >
<ItemsControl.Resources>
<!--some other data templates here-->
</DataTemplate>
<DataTemplate DataType="{x:Type VM:EllipseVM}" >
<Ellipse Width="{Binding width}"
Height="{Binding height}"
Fill="{Binding fillBrush}"
Stroke="Red" StrokeThickness="1"
behaviors:CanvasDragBehavior.CanBeDragged="True"
/>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Background="Transparent" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Top" Value="{Binding top}"/>
<Setter Property="Canvas.Left" Value="{Binding left}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
MVVM distinct 3 kinds of object:
View
VModel
Model
The property of the view should be bound to the VModel, you try correctly to bind the view with EllipseVM, like a real Expert!
The issue on your project is that you have not a single View bound to a single VM, but you want an infinite number of VModels.
I will enumerate below some points of reflection:
I would like to challenge the fact that you register on different drag events:
element.MouseLeftButtonDown
you should register only when objects are created or destroyed.
CanvasDragBehavior : why do you implement a singleton like pattern with a static public property (without private constructor) ?
Avoid registering properties via string like "CanBeDragged" find a way to define and use interfaces eg IMoveFeature{bool IsDraggable}
Your code is too complicated and has some errors.
For example the static instance property of the CanvasDragBehavior is not required. It looks like you confused something here.
To position the element on the Canvas simply use the attached properties Canvas.Top and Canvas.Left.
Prefer the tunneling version of input events, prefixed with Preview. For example listen to PreviewMouseMove instead of MouseMove.
Another important fix is to use the WeakEventManager to subscribe to the events of the attached elements. Otherwise you create a potential memory leak (depending on the lifetime of the event publisher and event listener). Always remember to follow the following pattern to avoid such memory leaks: when you subscribe to events, ensure that you will always unsubscribe too. If you have no control over the object lifetime, always follow the Weak Event pattern and use the WeakEventManager to observe events.
In your case: when an item is removed from the ItemsControl.ItemsSource, your behavior won't be able to detect this change in order to unsubscribe from the corresponding events.
The risk of a memory leak in your context is not high, but better be safe than sorry and stick to the safety pattern.
When implementing a control or behavior, try to avoid tight coupling to data types and implementation details. Make the control or behavior as generic as possible. For this reason, your behavior should not know about the DataContext and what type of elements are dragged. This way you can simply extend your code or reuse the behavior for example to allow to drag a Rectangle too. Right now, your code only works with a Ellipse or EllipseVM.
Usually, you don't need the position data in your view model. If it's pure UI drag&Drop the coordinates are part of the view only. In this case you would prefer to attach the behavior to the item container instead of attaching it to the elements of the DataTemplate: you don't want to drag the data model. You want to drag the item container.
If you still need the coordinates in your model, you would setup a binding in the ItemsControl.ItemContainerStyle like in the example below (the DataContext of the item container Style is always the data item, which is of type EllipseVM in your case).
The simplified and improved version that targets dragging the item container rather than the data model could look as follows. Note that the following behavior is implemented by only using the UIElement type for the dragged object. The actual type of the element or the data model is not required at all. This way it will work with every shape or control (not only Ellipse). You can even drag a Button or whatever is defined in the DataTemplate. The DataContext can be any type.
public class CanvasDragBehavior
{
public static readonly DependencyProperty IsDragEnabledProperty = DependencyProperty.RegisterAttached(
"IsDragEnabled",
typeof(bool),
typeof(CanvasDragBehavior),
new PropertyMetadata(false, OnIsDragEnabledChanged));
public static bool GetIsDragEnabled(DependencyObject obj) => (bool)obj.GetValue(IsDragEnabledProperty);
public static void SetIsDragEnabled(DependencyObject obj, bool value) => obj.SetValue(IsDragEnabledProperty, value);
private static Point DragStartPosition { get; set; }
private static ConditionalWeakTable<UIElement, FrameworkElement> ItemToItemHostMap { get; } = new ConditionalWeakTable<UIElement, FrameworkElement>();
private static void OnIsDragEnabledChanged(object attachingElement, DependencyPropertyChangedEventArgs e)
{
if (attachingElement is not UIElement uiElement)
{
return;
}
var isEnabled = (bool)e.NewValue;
if (isEnabled)
{
WeakEventManager<UIElement, MouseButtonEventArgs>.AddHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonDown), OnDraggablePreviewMouseLeftButtonDown);
WeakEventManager<UIElement, MouseEventArgs>.AddHandler(uiElement, nameof(uiElement.PreviewMouseMove), OnDraggablePreviewMouseMove);
WeakEventManager<UIElement, MouseButtonEventArgs>.AddHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonUp), OnDraggablePreviewMouseLeftButtonUp);
}
else
{
WeakEventManager<UIElement, MouseButtonEventArgs>.RemoveHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonDown), OnDraggablePreviewMouseLeftButtonDown);
WeakEventManager<UIElement, MouseEventArgs>.RemoveHandler(uiElement, nameof(uiElement.PreviewMouseMove), OnDraggablePreviewMouseMove);
WeakEventManager<UIElement, MouseButtonEventArgs>.RemoveHandler(uiElement, nameof(uiElement.PreviewMouseLeftButtonUp), OnDraggablePreviewMouseLeftButtonUp);
}
}
private static void OnDraggablePreviewMouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Released)
{
return;
}
var draggable = sender as UIElement;
if (!ItemToItemHostMap.TryGetValue(draggable, out FrameworkElement draggableHost))
{
return;
}
Point newDragEndPosition = e.GetPosition(draggableHost);
newDragEndPosition.Offset(-DragStartPosition.X, -DragStartPosition.Y);
Canvas.SetLeft(draggable, newDragEndPosition.X);
Canvas.SetTop(draggable, newDragEndPosition.Y);
}
private static void OnDraggablePreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
var draggable = sender as UIElement;
if (!ItemToItemHostMap.TryGetValue(draggable, out _))
{
if (!TryGetVisualParent(draggable, out Panel draggableHost))
{
return;
}
ItemToItemHostMap.Add(draggable, draggableHost);
}
DragStartPosition = e.GetPosition(draggable);
draggable.CaptureMouse();
}
private static void OnDraggablePreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
=> (sender as UIElement)?.ReleaseMouseCapture();
private static bool TryGetVisualParent<TParent>(DependencyObject element, out TParent parent) where TParent : DependencyObject
{
parent = null;
if (element is null)
{
return false;
}
element = VisualTreeHelper.GetParent(element);
if (element is TParent parentElement)
{
parent = parentElement;
return true;
}
return TryGetVisualParent(element, out parent);
}
}
Usage example
DataItem.cs
class DataItem : INotifyPropertyChanged
{
// Allow this item to change its coordinates aka get dragged
private bool isPositionDynamic;
public bool IsPositionDynamic
{
get => this.isPositionDynamic;
set
{
this.isPositionDynamic = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] string propertyName = "")
=> this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
MainWindow.xaml
<Window>
<ItemsControl ItemsSource="{Binding DataItems}"
Height="1000"
Width="1000">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:DataItem}">
<Ellipse Width="50"
Height="50"
Fill="Red"
Stroke="Black"
StrokeThickness="1" />
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Width="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=ActualWidth}"
Height="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=ActualHeight}"
Background="Gray" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<!-- If every item is draggable, simply set this property to 'True' -->
<Setter Property="local:CanvasDragBehavior.IsDragEnabled"
Value="{Binding IsPositionDynamic}" />
<!-- Optional binding if you need the coordinates in the view model.
This example assumes that the view model has a Top and Left property -->
<Setter Property="Canvas.Top"
Value="{Binding Top, Mode=TwoWay}" />
<Setter Property="Canvas.Left"
Value="{Binding Left, Mode=TwoWay}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</Window>
I have a custom control named CustomTreeView which contains a TreeView. I would like to expose the SelectedItem Property of the TreeView to users of the custom control.
For that I tried to add a new dependency property to the custom control and bind that property to the SelectedItem Property of the TreeView.
Unfortunatly I seem to be getting it wrong. Could you take a look?
TreeView.xaml
<UserControl x:Class="Fis.UI.Windows.BacNet.Views.RestructuredView.View.Controls.CustomTreeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Selected="{Binding ElementName=treeView, Path=SelectedItem}">
<TreeView x:Name="treeView"/>
</UserControl>
TreeView.xaml.cs
public partial class CustomTreeView : UserControl
{
public static readonly DependencyProperty IsSelectedProperty = DependencyProperty.Register(
"Selected", typeof(Node),
typeof(TreeView)
);
public Node Selected
{
get { return (Node)GetValue(IsSelectedProperty); }
set { SetValue(IsSelectedProperty, value); }
}
public TreeView()
{
InitializeComponent();
}
}
Thanks!
Part of your solution is in this answer here. It's a link-only answer with a dead link (or was -- I just improved it), but it does mention the key point.
You can't bind TreeView.SelectedItem. Your dependency property definition is broken in multiple ways and it should be named SelectedItem in accordance with standard WPF practice. Here's the usercontrol code behind, which defines the dependency property along with event handlers as a substitute for the binding.
public partial class CustomTreeView : UserControl
{
public CustomTreeView()
{
InitializeComponent();
}
#region SelectedItem Property
public Node SelectedItem
{
get { return (Node)GetValue(SelectedProperty); }
set { SetValue(SelectedProperty, value); }
}
public static readonly DependencyProperty SelectedProperty =
DependencyProperty.Register(nameof(SelectedItem), typeof(Node), typeof(CustomTreeView),
new FrameworkPropertyMetadata(null,
FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
Selected_PropertyChanged)
{ DefaultUpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged });
protected static void Selected_PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
(d as CustomTreeView).OnSelectedChanged(e.OldValue);
}
private void OnSelectedChanged(object oldValue)
{
if (SelectedItem != treeView.SelectedItem)
{
var tvi = treeView.ItemContainerGenerator.ContainerFromItem(SelectedItem) as TreeViewItem;
if (tvi != null)
{
tvi.IsSelected = true;
}
}
}
#endregion SelectedItem Property
private void treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
{
if (SelectedItem != e.NewValue)
{
SelectedItem = e.NewValue as Node;
}
}
}
And here's the TreeView in the UserControl XAML. I'm omitting ItemsSource and ItemTemplate as irrelevant.
<TreeView
x:Name="treeView"
SelectedItemChanged="treeView_SelectedItemChanged"
/>
And here's the snippet from MainWindow.xaml I used for testing it:
<StackPanel>
<local:CustomTreeView x:Name="treeControl" />
<Label
Content="{Binding SelectedItem.Text, ElementName=treeControl}"
/>
</StackPanel>
My Node class has a Text property and I'm populating the tree via the DataContext to save having to set up another dependency property for the items.
I have made a Usercontrol based on MVVM. A window(e.g. MainWindow.xaml) calls this Usercontrol, the View of this Usercontrol has a treeview with nodes, child nodes and buttons ('ok', etc...). The user selects a node in the treeview and press the "ok" button on the View. I could read the selected nodes of the treeview in the View.xaml.cs. I have created dependency properties in View.xaml.cs to save the selected treeview item. In the mainwindow.xaml.cs, I am instantiating my usercontrol and calling the dependency property e.g. usercontrol.value where value is the dependency property in the View.
The overall idea is when user selects the treeview node and press ok, the view should be close and the value of the selected treeview item is paased to the Window.
The problem is when I close the view the value of the dependency property get lost and null is returned to the Window
I am new to WPF.
Window.xaml
<Grid>
<view:SystemExplorerView x:Name="MyView"></view:SystemExplorerView>
</Grid>
Window.xaml.cs
public object m_myValue;
public object myValue {
get { return m_myValue; }
set
{
m_myValue = value;
OnPropertyChanged("myValue");
}
}
public Window1()
{
InitializeComponent();
myValue = MyView.Value;
}
View.xaml.cs
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(object), typeof(SystemExplorerView),
new PropertyMetadata(null));
public SystemExplorerView()
{
InitializeComponent();
}
public object Value
{
get { return (object)GetValue(ValueProperty); }
set
{
SetValue(ValueProperty, value);
}
}
private void OKbtnclk(object sender, RoutedEventArgs e)
{
Value = myTreeView.SelectedItem;
Window.GetWindow(this).Close();
}
You may access the property in a Closing event handler:
<Window ... Closing="Window_Closing">
...
</Window>
Code behind:
private void Window_Closing(object sender, CancelEventArgs e)
{
myValue = MyView.Value;
}
I'm trying to create a custom UserControl that displays the properties of a complex object as a form. Additionally, if the user unchecks a checkbox in the header of the UserControl, the value of the dependency property should be null (but the form values should stay displayed, even if the form is disabled) - and vice versa.
I'm working with two dependency properties of type ComplexObject on the UserControl - one is public (this will be bound to by the client), another is private (its properties will be bound to the internal controls in the UserControl):
public ComplexObject ComplexObject
{
get { return (ComplexObject )GetValue(ComplexObjectProperty); }
set { SetValue(ComplexObjectProperty, value); }
}
private ComplexObject VisibleComplexObject
{
get { return (ComplexObject)GetValue(VisibleComplexObjectProperty); }
set { SetValue(VisibleComplexObjectProperty, value); }
}
Now I'm struggling with a binding between those two, so that CompexObject becomes either VisibleComplexObject or null based on the checkbox value. This should also work the other way. I've tried to solve this using DataTriggers in the Style of the UserControl, but was unable to do so:
<UserControl.Style>
<Style TargetType="local:CheckableComplexTypeGroup">
// 'CheckableComplexTypeGroup' TargetType does not match type of the element 'UserControl'
</Style>
</UserControl.Style>
Using <local:CheckableComplexTypeGroup.Style> instead of <UserControl.Style> didn't work either.
Are there any other suggestions? Or maybe another way of doing this?
Finally I've solved this without using plain old event handlers instead of binding/triggers.
CheckableComplexObjectGroup.xaml:
<UserControl Name="thisUC" ...>
<GroupBox>
<GroupBox.Header>
<CheckBox Name="cbComplexObject"
IsChecked="{Binding ElementName=thisUC, Path=ComplexObject, Mode=OneWay, Converter={StaticResource nullToFalseConv}}"
Checked="cbComplexObject_Checked" Unchecked="cbComplexObject_Unchecked"/>
</GroupBox.Header>
...
</UserControl>
CheckableComplexObjectGroup.cs:
public static readonly DependencyProperty ComplexObjectProperty =
DependencyProperty.Register("ComplexObject",
typeof(ComplexObject),
typeof(CheckableComplexObjectGroup),
new PropertyMetadata(null));
private static readonly DependencyProperty VisibleComplexObjectProperty =
DependencyProperty.Register("VisibleComplexObject",
typeof(ComplexObject),
typeof(CheckableComplexObjectGroup),
new PropertyMetadata(new ComplexObject()));
//...
protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
{
if (e.Property == ComplexObjectProperty)
{
if (null != e.NewValue)
VisibleComplexObject = ComplexObject;
}
base.OnPropertyChanged(e);
}
private void cbComplexObject_Checked(object sender, RoutedEventArgs e)
{
ComplexObject = VisibleComplexObject;
}
private void cbComplexObject_Unchecked(object sender, RoutedEventArgs e)
{
ComplexObject = null;
}
I have a simple WPF window with a TabItem containing a ComboBox with colors and a custom Canvas drawing a rectangle with that color. In my PaintCanvas I have a DependencyProperty like this:
class PaintCanvas : System.Windows.Controls.Canvas
{
public static readonly DependencyProperty PaintObjectProperty = DependencyProperty.Register(
"PaintObject", typeof(PaintObject), typeof(PaintCanvas), new PropertyMetadata(OnPaintObjectChanged));
public PaintObject PaintObject
{
get { return this.GetValue(PaintObjectProperty) as PaintObject; }
set
{
this.SetValue(PaintObjectProperty, value);
}
}
private static void OnPaintObjectChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
PaintCanvas canvas = (PaintCanvas)d;
// Update stuff
canvas.InvalidateVisual();
}
protected override void OnRender(DrawingContext dc)
{
base.OnRender(dc);
if (PaintObject != null)
{
dc.DrawRectangle(new SolidColorBrush(PaintObject.Color), null, new Rect(0, 0, PaintObject.Width, PaintObject.Height));
}
}
}
The PaintObject dependency property is bound in xaml to its corresponding property in PaintViewModel:
<TabControl>
<TabItem DataContext="{Binding PaintViewModel}">
<StackPanel >
<ComboBox ItemsSource="{Binding Colors}" SelectedItem="{Binding Color}" />
<my:PaintCanvas Width="100" Height="100" PaintObject="{Binding PaintObject}" />
</StackPanel>
</TabItem>
</TabControl>
PaintViewModel is a property in the Window's ViewModel:
class MainViewModel
{
PaintViewModel paintViewModel;
public MainViewModel()
{
paintViewModel = new PaintViewModel();
}
public PaintViewModel PaintViewModel
{
get { return paintViewModel; }
}
...
}
The actual PaintViewModel:
class PaintViewModel : INotifyPropertyChanged
{
PaintObject paintObject;
ObservableCollection<Color> colors = new ObservableCollection<Color>();
Color currentColor;
public PaintObject PaintObject
{
get { return paintObject; }
set { paintObject = value; RaisePropertyChanged("PaintObject"); }
}
public ObservableCollection<Color> Colors
{
get { return colors; }
}
public Color Color
{
get { return currentColor; }
set {
currentColor = value;
RaisePropertyChanged("Color");
paintObject.Color = currentColor;
RaisePropertyChanged("PaintObject");
}
}
// Constructors and INotifyPropertyChanged stuff...
}
The TabItem seems to be correctly bound to the view model, because the color combobox works as it should. However, although the paint object is updated and RaisePropertyChanged("PaintObject") is called, the DependencyProperty in PaintCanvas is never updated. What am I doing wrong here??
I don't see that you change reference to PaintObject, you cahanged one of the properties of it(Color) and fire as PaintObject is changed, and since it is not, dependency property doesnt refresh
As a solution, you can add Color dependency property in the PaintCanvas, and bind Color to PaintObject.Color in xaml
<my:PaintCanvas Width="100" Height="100" PaintObject="{Binding PaintObject}" Color={Binding PaintObject.Color} />
And if you not forget to call NotifyPropertyChanged of Color property in PaintObject, PaintConvas Color property will be fired to be changed
I see some mess in your design, try to keep things simple