Custom UserControl with ContentControl field - c#

I have a UserControl which acts as a wrapper for a ContentControl, which is simply a title to the ContentControl.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="Green" Grid.Row="0">
<TextBlock Text="{Binding Header}" Style="{StaticResource HeaderStyle}" Margin="12, 10, 0, 10" />
</Grid>
<ContentControl HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Content="{Binding Body}" Grid.Row="1"/>
</Grid>
And here's where I try to use the control:
<gbl:ListHeader Grid.Row="1" Visibility="{Binding HasMovies, Converter={StaticResource VisibilityConverter}}" Header="{Binding Path=LocalizedResources.movie_list_header, Source={StaticResource LocalizedStrings}}" >
<gbl:ListHeader.Body>
<ListBox SelectionChanged="ListBoxContainerSelectionChanged" ItemsSource="{Binding Movies}" ItemContainerStyle="{StaticResource HeaderListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<gbl:MovieItemControl Header="{Binding MovieTitle}" Description="{Binding FormattedDescription}" Detail="{Binding FormattedDetail}" Opacity="{Binding IsSuppressed, Converter={StaticResource DimIfTrueConverter}}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</gbl:ListHeader.Body>
The DataBinding to the list happens, however nothing displays in the control. I'm guessing that it's still there, but too small to see (undefined h/w).
Is there something that I'm doing wrong? The header shows fine, so the control appears to be working somewhat.
Edit:
Here's the code-behind for ListHeader:
public partial class ListHeader : UserControl
{
private readonly ListHeaderData _data = new ListHeaderData();
public ListHeader()
{
InitializeComponent();
DataContext = _data;
}
public string Header
{
get { return (string)GetValue(HeaderProperty); }
set { SetValue(HeaderProperty, value); }
}
// Using a DependencyProperty as the backing store for Header. This enables animation, styling, binding, etc...
public static readonly DependencyProperty HeaderProperty =
DependencyProperty.Register("Header", typeof(string), typeof(ListHeader), new PropertyMetadata("",HeaderPropertyChanged) );
private static void HeaderPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var lh = d as ListHeader;
if (lh != null)
lh._data.Header = e.NewValue as string;
}
public object Body
{
get { return GetValue(BodyProperty); }
set { SetValue(BodyProperty, value); }
}
// Using a DependencyProperty as the backing store for Body. This enables animation, styling, binding, etc...
public static readonly DependencyProperty BodyProperty =
DependencyProperty.Register("Body", typeof(object), typeof(ListHeader), new PropertyMetadata(null, BodyPropertyChanged));
private static void BodyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var lh = d as ListHeader;
if (lh != null)
lh._data.Body = e.NewValue;
}
}
public class ListHeaderData : ViewModelBase
{
public ListHeaderData()
{
if (IsInDesignMode)
{
Header = "Custom Header Goes Here";
Body = new Grid() { Background = new SolidColorBrush(Colors.Yellow) };
}
}
private string _header;
public string Header
{
get { return _header; }
set { _header = value; RaisePropertyChanged("Header"); }
}
private object _body;
public object Body
{
get { return _body; }
set { _body = value; RaisePropertyChanged("Body");}
}
}


In addition to what i said in my comment you appear to bind to your DataContext in the UserControl declaration which is a Bad Thing and the problem of all this.
You appear to want to bind to the properties of the UserControl but you bind directly to the properties of the DataContext which is your ViewModel, hence setting the Body property on an instance in XAML does nothing as the property is sidestepped by the internal binding.
UserControls should for all i know do bindings like this:
<UserControl Name="control" ...>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="Green" Grid.Row="0">
<TextBlock Text="{Binding Header, ElementName=control}" Style="{StaticResource HeaderStyle}" Margin="12, 10, 0, 10" />
</Grid>
<ContentControl HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Content="{Binding Body, ElementName=control}" Grid.Row="1"/>
</Grid>
Get rid of those dependency property changed callbacks and change the property code in ViewModels to this format to make sure it changed:
private int _MyProperty = 0;
public int MyProperty
{
get { return _MyProperty; }
set
{
if (_MyProperty != value)
{
_MyProperty = value;
OnPropertyChanged("MyProperty");
}
}
}

Related

I can't bind class properties into text boxes (MVVM, WPF, C#)

I'm learning MVVM pattern and I have a simple issue.
I have created a class whose properties I want to bind into text boxes inside a Dialog (in this case I only have one property):
public class NewObjectClass : ObservableObject
{
private string _name;
public string Name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("Name");
}
}
}
This is the ViewModel of the Dialog:
class ObjCreationViewModel : ObservableObject
{
// Class whose properties I want to bind in text boxes
private NewObjectClass _newObject;
public NewObjectClass NewObject
{
get { return _newObject; }
set { _newObject = value;
OnPropertyChanged("NewObject");
}
}
// String to test binding
private string _test;
public string Test
{
get { return _test; }
set { _test = value; }
}
// Create new object view
private DelegateCommand _createNewObject;
public DelegateCommand CreateNewObjectCmd => _createNewObject ?? (_createNewObject = new DelegateCommand(CreateNewObject));
void CreateNewObject()
{
// Do things in the future
}
public ObjCreationViewModel()
{
// Instance of New Object
NewObjectClass NewObject = new NewObjectClass();
// New object property that I want to show in TextBox
NewObject.Name = "Why this one is not working?";
// String text that works
Test = "Why this is working?";
}
}
And finally this is the view:
<UserControl x:Class="AOE.MVVM.View.ObjCreationView"
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:AOE.MVVM.View"
xmlns:viewmodel="clr-namespace:AOE.MVVM.ViewModel"
mc:Ignorable="d"
MinHeight="500" MinWidth="500">
<UserControl.DataContext>
<viewmodel:ObjCreationViewModel/>
</UserControl.DataContext>
<Border Grid.ColumnSpan="4" CornerRadius="20"
Background="White" BorderBrush="Black" BorderThickness="1.5">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1">
<StackPanel Orientation="Horizontal">
<Label Margin="10" Content="Object name:" Style="{StaticResource DescriptionLabelStyle}"/>
<TextBox x:Name="TextObjectName" Width="200" Height="25" Text="{Binding NewObject.Name, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
</StackPanel>
</StackPanel>
<Button Grid.Row="1" Margin="5" Name="CreateBtn" Width="75" Height="30" Content="Create" FontFamily="Verdana" Foreground="#007BC0" FontWeight="Bold" Background="Transparent" BorderThickness="3" BorderBrush="#007BC0" VerticalAlignment="Bottom" Command="{Binding CreateNewObjectCmd}"/>
</Grid>
</Border>
The issue is that I can't bind the property Name of "NewObject" into the text box, however if I bind "Test", It works properly.
I want to show in the textbox the property value and also if I change the value in the textbox, change the property value of the instance "NewObject".
Anybody could tell me what is wrong?
PD "ObservableObject class that implements PropertyChange event":
public class ObservableObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string propertyname = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyname));
}
}

The line
NewObjectClass NewObject = new NewObjectClass();
defines a local variable NewObject, but does not set the property NewObject.
Change it to
NewObject = new NewObjectClass();

Binding properties from CustomControl to page in WPF

I want to bind properties from CustomControl to my page, then back to CustomControl and calculate quantity of pages and display it in list.
My code look like.
CustomControl
public partial class CustomControl : UserControl
public CustomControl()
{
InitializeComponent()
}
public int PageSelected
{
get
{
return (int)GetValue(PageSelectedProperty);
}
set
{
SetValue(PageSelectedProperty, value);
}
}
public static readonly DependencyProperty PageSelectedProperty = DependencyProperty.Register("PageSelected", typeof(int), typeof(CustomControl), new PropertyMetadata(null));
public int RecordsPerPage
{
get
{
return (int)GetValue(RecordsPerPageProperty);
}
set
{
SetValue(RecordsPerPageProperty, value);
}
}
public static readonly DependencyProperty RecordsPerPageProperty = DependencyProperty.Register("RecordsPerPage", typeof(int), typeof(CustomControl), new PropertyMetadata(null));
public IList<int> RecordsPerPageList
{
get
{
return (IList<int>)GetValue(RecordsPerPageListProperty);
}
set
{
SetValue(RecordsPerPageListProperty, value);
}
}
public static readonly DependencyProperty RecordsPerPageListProperty = DependencyProperty.Register("RecordsPerPageList", typeof(List<int>), typeof(CustomControl), new PropertyMetadata(null));
public int RecordsCount
{
get
{
return (int)GetValue(RecordsCountProperty);
}
set
{
SetValue(RecordsCountProperty, value);
CreatePagesList();
}
}
public static readonly DependencyProperty RecordsCountProperty = DependencyProperty.Register("RecordsCount", typeof(int), typeof(CustomControl), new PropertyMetadata(null));
public IList<int> PagesList
{
get
{
return (IList<int>)GetValue(PagesListProperty);
}
set
{
SetValue(PagesListProperty, value);
}
}
public static readonly DependencyProperty PagesListProperty = DependencyProperty.Register("PagesList", typeof(List<int>), typeof(CustomControl), new PropertyMetadata(null));
public int PagesCount
{
get
{
return (int)GetValue(PagesCountProperty);
}
set
{
SetValue(PagesCountProperty, value);
}
}
public static readonly DependencyProperty PagesCountProperty = DependencyProperty.Register("PagesCount", typeof(int), typeof(CustomControl), new PropertyMetadata(null));
Custom Control xaml
<UserControl x:Class="Mtrx.CustomControls.CustomControl"
mc:Ignorable="d"
d:DesignHeight="90" Width="200">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="90" />
</Grid.RowDefinitions>
<ComboBox Width="40" Height="20" Grid.Column="1" Margin="0,5,0,5"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=PagesList}"
SelectedItem="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=PageSelected, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
HorizontalContentAlignment="Center"/>
<ComboBox Width="40" Height="20" Grid.Column="9" Margin="0,5,0,5"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=RecordsPerPageList, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
SelectedItem="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=RecordsPerPage, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
HorizontalContentAlignment="Center"/>
</Grid>
</UserControl>
Page xaml.cs
public class PageVievModel:AbstractPage
public int RowsCount
{
get
{
return _rowsCount;
}
set
{
if (value != _rowsCount)
{
_rowsCount = value;
RaisePropertyChanged("RowsCount");
}
}
}
private int _rowsCount; //we get it from other place
public int DGRecordsMax
{
get
{
return _dgRecordsMax;
}
set
{
if (value != _dgRecordsMax)
{
_dgRecordsMax = value;
if (value > 0)
{
DataGridRecordsMaxCount = value.ToString();
Settings.Default.Save();
}
RaisePropertyChanged("DGRecordsMax");
}
}
}
private int _dgRecordsMax;
public IList<int> DGRecordsMaxList
{
get
{
return _dGRecordsMaxList;
}
set
{
if (_dGRecordsMaxList != value)
{
_dGRecordsMaxList = value;
RaisePropertyChanged("DGRecordsMaxList");
}
}
}
private IList<int> _dGRecordsMaxList = new List<int>();
public IList<int> PagesList
{
get
{
return _pagesList;
}
set
{
if (_pagesList != value)
{
_pagesList = value;
RaisePropertyChanged("PagesList");
}
}
}
private IList<int> _pagesList = new List<int>();
public int PagesCount
{
get
{
return _pagesCount;
}
set
{
if (value != _pagesCount)
{
_pagesCount = value;
RaisePropertyChanged("PagesCount");
}
}
}
private int _pagesCount;
public IList<int> CurrentPageList
{
get
{
return _currentPageList;
}
set
{
if (_currentPageList != value)
{
_currentPageList = value;
RaisePropertyChanged("CurrentPageList");
}
}
}
private IList<int> _currentPageList;
Page xaml
<UserControl x:Class="SomeClass"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="800"
IsEnabled="{Binding AllowInput, Converter={StaticResource AnyToBooleanConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel>
<SomeClass:CustomControl Width="280" Height="190"
RecordsCount="{Binding RowsCount, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
RecordsPerPage="{Binding DGRecordsMax, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay }"
RecordsPerPageList="{Binding DGRecordsMaxList, Mode=TwoWay}"
PagesCount="{Binding PagesCount, Mode=TwoWay}"
PageSelected="{Binding CurrentPage, Mode=TwoWay}"
PagesList="{Binding PagesList, Mode=TwoWay}"
RecordsFrom="{Binding RecordsFrom, Mode=TwoWay}"
RecordsTo="{Binding RecordsTo, Mode=TwoWay}"
DockPanel.Dock="Right"
VerticalAlignment="Bottom"/>
</WrapPanel.Resources>
</WrapPanel>
</Grid>
</UserControl>
When I am trying to run my program there are empty lists, earlier when I just kept more properties in Page it was working fine.
I would be greatful for help. It's hard to understand for me how make this two way bindable properties.

I tried to make an example using your code.
For me it worked if I changed both IList and List to ObservableCollection, e.g.
using System.Collections.ObjectModel;
....
public ObservableCollection<int> PagesList
{
get
{
return (ObservableCollection<int>)GetValue ( PagesListProperty );
}
set
{
SetValue ( PagesListProperty, value );
}
}
public static readonly DependencyProperty PagesListProperty = DependencyProperty.Register("PagesList", typeof(ObservableCollection<int>), typeof(CustomControl), new PropertyMetadata(null));
Note that I changed both the Property definition and the DependencyProperty definition.
Your code is a bit messy, for example you have a DockPanel tag which is closed with /WrapPanel, which obviously will not compile.
<DockPanel>
</WrapPanel>

WPF binding in data template not working for custom class

Working on a ComboBox that displays a list of available tile backgrounds. This is just a simple ComboBox with an ItemSource set to a collection of MapTileBackground objects.
The MapTileBackground class is defined entirely with properties:
public partial class MapTileBackground
{
public int Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public byte[] Content { get; set; }
public Nullable<int> Color { get; set; }
public int StrokeColor { get; set; }
public byte StrokeThickness { get; set; }
}
which is defined in a separate library and I would prefer to not change it.
I have defined a simple shape extension to draw the background::
public class MapTileBackgroundPreview : Shape
{
public static readonly DependencyProperty SizeProperty = DependencyProperty.Register("Size", typeof(Point), typeof(MapTileBackgroundPreview));
public static readonly DependencyProperty TileBackgroundProperty = DependencyProperty.Register("TileBackground", typeof(MapTileBackground), typeof(MapTileBackgroundPreview));
public MapTileBackgroundPreview()
{
layout = new Hex.Layout(Hex.Orientation.Flat, new Hex.Point(8, 8), new Hex.Point(4, 4));
Size = new Point(8, 8);
TileBackground = null;
}
private Hex.Layout layout;
protected override Geometry DefiningGeometry
{
get
{
var points = layout.HexCorners(0, 0).ToArray();
var path = new PathFigure();
path.StartPoint = points[5].ToWin();
for (var i = 0; i < 6; i++)
path.Segments.Add(new LineSegment(points[i].ToWin(), true));
var geo = new PathGeometry();
geo.Figures.Add(path);
return geo;
}
}
public Point Size
{
get
{
return (Point)GetValue(SizeProperty);
}
set
{
SetValue(SizeProperty, value);
layout.Size = value.ToHex();
layout.Origin = new Hex.Point(layout.Size.X / 2, layout.Size.Y / 2);
}
}
public MapTileBackground TileBackground
{
get
{
return (MapTileBackground)GetValue(TileBackgroundProperty);
}
set
{
SetValue(TileBackgroundProperty, value);
if (value == null)
{
Fill = Brushes.Transparent;
Stroke = Brushes.Black;
StrokeThickness = 1;
}
else
{
Stroke = value.Stroke();
StrokeThickness = value.StrokeThickness();
Fill = value.Fill(layout.Orientation);
}
}
}
}
The layout is just a conversion utility between screen pixel coordinates and a hexagonal system. DefiningGeometry just add 6 line segments of the hex. The TileBackground setter, when given a not null MapTileBackground, updates the Stroke and Fill as the background defines. I've tested this control successfully (outside the combo box data template).
And speaking of:
<DataTemplate x:Key="TileListItemRenderer">
<Grid Width="225">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<local:MapTileBackgroundPreview Grid.Row="0" Grid.Column="0" Size="12,12" VerticalAlignment="Center" HorizontalAlignment="Center" TileBackground="{Binding /}"/>
<Label Grid.Row="0" Grid.Column="1" Content="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Center" FontWeight="Bold"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Description}" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
So I just create a shape, and two labels, bind the shape to the current MapTileBackground object (combo box ItemSource is a collection of MapTileBackground objects), and the labels to Name and Description.
My problem is the shape is always drawn empty (as in TileBackground is null) and the setter is never invoked. Both the Name Label and Description TextBlock behave as expected (display correct text). And during my debugging attempts, I created an id property on the preview object which in turn invokes the TileBackground Setter and bound it to the Id property (avoid current object bind), again, the TileBackgroundId setter is never invoked. I even added a new label bound to Id to see if that was working and it displays the id as expected. Here are those changes that again did not work. The TileBackgroundId or TileBackground properties are never set when opening the drop down.
<DataTemplate x:Key="TileListItemRenderer">
<Grid Width="225">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<local:MapTileBackgroundPreview Grid.Row="0" Grid.Column="0" Size="12,12" VerticalAlignment="Center" HorizontalAlignment="Center" TileBackgroundId="{Binding Id}"/>
<Label Grid.Row="0" Grid.Column="0" Content="{Binding Id}" HorizontalAlignment="Left" VerticalAlignment="Center" FontWeight="Bold"/>
<Label Grid.Row="0" Grid.Column="1" Content="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Center" FontWeight="Bold"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Description}" HorizontalAlignment="Stretch" VerticalAlignment="Top" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
public static readonly DependencyProperty TileBackgroundIdProperty = DependencyProperty.Register("TileBackgroundId", typeof(int), typeof(MapTileBackgroundPreview));
public int TileBackgroundId
{
get
{
return (int)GetValue(TileBackgroundIdProperty);
}
set
{
SetValue(TileBackgroundIdProperty, value);
TileBackground = TMapTileBackgroundTool.Get(value);
}
}
TMapTileBackgroundTool.Get() returns the correct object based on Id.
I have also tested instances of MapTileBackgroundPreview setting TileBackgroundId outside the data template.
Any thoughts as to what is going on?

The setter of the CLR wrapper for the dependency property is not supposed to be set as the WPF binding engine calls the GetValue and SetValue methods directly:
Setters not run on Dependency Properties?
Why are .NET property wrappers bypassed at runtime when setting dependency properties in XAML?
The getter and setter of the CLR wrapper property should only call the GetValue and SetValue method respectively.
If you want to do something when the dependency property is set, you should register a callback:
public static readonly DependencyProperty TileBackgroundIdProperty = DependencyProperty.Register("TileBackgroundId", typeof(int), typeof(MapTileBackgroundPreview),
new PropertyMetadata(0, new PropertyChangedCallback(TileBackgroundIdChanged)));
public int TileBackgroundId
{
get
{
return (int)GetValue(TileBackgroundIdProperty);
}
set
{
SetValue(TileBackgroundIdProperty, value);
}
}
private static void TileBackgroundIdChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MapTileBackgroundPreview ctrl = (MapTileBackgroundPreview)d;
ctrl.TileBackground = TMapTileBackgroundTool.Get((int)e.NewValue);
}

UserControl - DependencyProperty- default values in the MainWindow?

I have a UserControl that works perfectly at run time except the default values. I have used the same UserControl (MaterialUserControl) in two different Tabs in the MainWindow. In one of the Tabs it's default values (RadioButton isChecked values) work fine but not the other?
//This is the one which is not setting its default values!
<l:MaterialUserControl x:Name="materialShellUC" stainlessSteelBool="True" Click="shellMaterialBtn_Click" plateBool="True" ENBool="True"/>
//This one is in another Tab
<l:MaterialUserControl x:Name="materialDishUC" Width="500" HorizontalAlignment="Left" Click="materialDish_Click" plateBool="True" stainlessSteelBool="True" ENBool="True"/>
public partial class MaterialUserControl : UserControl
{
public MaterialUserControl()
{
InitializeComponent();
rootGrid.DataContext = this;
}
public static readonly DependencyProperty MaterialProperty =
DependencyProperty.Register("Material", typeof(string),
typeof(MaterialUserControl), new PropertyMetadata(""));
public String Material
{
get { return (String)GetValue(MaterialProperty); }
set { SetValue(MaterialProperty, value); }
}
public static readonly DependencyProperty MaterialNoProperty =
DependencyProperty.Register("MaterialNo", typeof(string),
typeof(MaterialUserControl), new PropertyMetadata(""));
public String MaterialNo
{
get { return (String)GetValue(MaterialNoProperty); }
set { SetValue(MaterialNoProperty, value); }
}
public event RoutedEventHandler Click;
void onButtonClick(object sender, RoutedEventArgs e)
{
if (this.Click != null)
this.Click(this, e);
}
public static readonly DependencyProperty stainlessSteelBoolProperty =
DependencyProperty.Register("strainlessSteelBool", typeof(bool), typeof(MaterialUserControl), new PropertyMetadata(null));
public bool stainlessSteelBool
{
get { return (bool)GetValue(stainlessSteelBoolProperty); }
set { SetValue(stainlessSteelBoolProperty, value); }
}
public static readonly DependencyProperty plateBoolProperty =
DependencyProperty.Register("plateBool", typeof(bool), typeof(MaterialUserControl), new PropertyMetadata(null));
public bool plateBool
{
get { return (bool)GetValue(plateBoolProperty); }
set { SetValue(plateBoolProperty, value); }
}
public static readonly DependencyProperty ENBoolProperty =
DependencyProperty.Register("ENBool", typeof(bool), typeof(MaterialUserControl), new PropertyMetadata(null));
public bool ENBool
{
get { return (bool)GetValue(ENBoolProperty); }
set { SetValue(ENBoolProperty, value); }
}
}
//here is the UserControl XAML
<Grid Background="Pink" x:Name="rootGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Material" Grid.Row="0" Foreground="DarkBlue"/>
<RadioButton Content="ASME" Grid.Row="1" GroupName="a"/>
<RadioButton Content="EN" Grid.Row="1" Grid.Column="1" GroupName="a" IsChecked="{Binding ENBool}"/>
<RadioButton Content="Plate" IsChecked="{Binding plateBool}" Grid.Row="2" GroupName="b"/>
<RadioButton Content="Tube" Grid.Row="2" Grid.Column="1" GroupName="b"/>
<RadioButton Content="Stainless steel" Grid.Row="3" GroupName="c" IsChecked="{Binding stainlessSteelBool}"/>
<RadioButton Content="Carbon Steel" Grid.Row="3" Grid.Column="1" GroupName="c"/>
<Button Content="Material" Grid.Row="4" Click="onButtonClick"/>
<TextBox Grid.Row="4" Grid.Column="1" IsReadOnly="True" Text="{Binding Path=Material}"/>
<TextBox Grid.Row="4" Grid.Column="2" IsReadOnly="True" Text="{Binding Path=MaterialNo}"/>
</Grid>
Is it something to do with the DataContext?
Changes appear in the VS designer but all the RadioButtons value stays null.

Because you are setting the default values to the dependency properties to be null. Instead of null, set them to false (or true depending on your requirements)
public static readonly DependencyProperty plateBoolProperty =
DependencyProperty.Register("plateBool", typeof(bool), typeof(MaterialUserControl), new PropertyMetadata(false));

I would guess this is because the radio buttons in one tab use the same GroupName as the radio buttons in another tab, so they are considered part of the same logical group even though they are spread across tabs: when you select a radio button in one tab, you deselect a radio button in the corresponding group of another tab. Try generating unique group names.
Also, null is not a valid default value for a property of type bool; either make the default value false, or migrate your properties to type bool?.

How to reuse a UserControl in situations where the DataContext is slightly different?

This is my first post on StackOverflow and also my first Question.
I had created a UserControl in WPF with the MVVM Pattern (called Block).
This UserControl should be used in another UserControl, as DataTemplate of a ListBox (called Sector).
The Block Control should be used as standalone and as DataTemplate for different UserControls.
If I set the DataContext in the View of Block, the standalone Version works great, but not as part of the Sector View.
If I don´t set the DataContext in the View of Block, it works in Sector but don’t standalone.
My question is, is it the only way to leave the DataContext in the View of Block and set it in the View I used the Control or the ViewModel?
Here is my Code:
Model of Block:
public class BlockModel : ModelBase
{
#region private Variables
string blockName = "Block";
string blockContent = "00000";
#endregion private Variables
#region Properties
public string BlockName
{
get { return blockName; }
set { blockName = value; NotifyPropertyChange("BlockName "); }
}
public string BlockContent
{
get { return blockContent; }
set { blockContent = value; NotifyPropertyChange("BlockContent"); }
}
#endregion Properties
#region ctor
public BlockModel () { }
#endregion ctor
}
ViewModel of Block:
public class BlockViewModel : ViewModelBase
{
#region private Variables
string charToFill = "0";
DelegateCommand fillWithChar;
BlockModel dataModel = new BlockModel();
#endregion private Variables
#region Properties
public Models. BlockModel DataModel
{
get { return dataModel; }
set { dataModel = value; }
}
public string BlockContent
{
get { return dataModel. BlockContent; }
set
{
if (dataModel. BlockContent != value)
{
dataModel. BlockContent = value;
NotifyPropertyChange ("BlockContent");
}
}
}
public string BlockName
{
get { return dataModel. BlockName; }
set
{
if (dataModel. BlockName != value)
{
dataModel. BlockName = value;
NotifyPropertyChange("BlockName");
}
}
}
public string CharToFill
{
get { return charToFill; }
set
{
if (charToFill != value)
{
charToFill = value;
NotifyPropertyChange ("CharToFill");
}
}
}
public ICommand FillWithChar
{
get
{
if (fillWithChar == null)
fillWithChar = new DelegateCommand(FillText);
return fillWithChar;
}
}
#endregion Properties
#region ctor
public BlockViewModel()
{
}
#endregion ctor
#region Methods
private void FillText()
{
CodingBlockContent = CodingBlockContent.PadLeft(32, charToFill[0]);
}
#endregion Methods
}
View of Block:
<UserControl x:Class="…./Block"
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:…/Controls"
mc:Ignorable="d" d:DesignWidth="460" d:DesignHeight="44">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="124" />
<ColumnDefinition Width="301" />
<ColumnDefinition Width="30"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding BlockName}"
HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="14" Margin="2,6"/>
<ComboBox FontFamily="Consolas" Grid.Row="00" Grid.Column="1"
Text="{Binding BlockContent, Mode=TwoWay}"
Tag="{Binding BlockName}" Name="cbxBlock" FontSize="14"
HorizontalAlignment="Left" VerticalAlignment="Center" Width="290" Margin="1,4,0,5" IsEditable="True" Height="26">
<ComboBoxItem Content=""></ComboBoxItem>
<ComboBoxItem Content="0000000000000"></ComboBoxItem>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
<TextBox Margin="10,2,0,2" Text="0" Width="24" FontSize="14" Name="tbxChar" MaxLength="1"></TextBox>
<TextBlock Margin="10,2,0,2" Text="auffüllen" VerticalAlignment="Center" FontSize="14"></TextBlock>
<Button Margin="10,2,0,2" Content="Ausführen" Width="100" Command="{Binding FillWithChar}"></Button>
</StackPanel>
</ComboBox>
<TextBlock Grid.Row="0" Width="30" Grid.Column="2" Text="{Binding CodingBlockContent.Length}"
HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="14" Margin="2,6,0,6" Grid.ColumnSpan="2"/>
</Grid>
Model of Sector:
public class SectorModel
{
#region private Variables
int blockAmount = 4;
string sectorNumber = "Sektor";
int blockBegin = 0;
bool isSectorInUse = false;
#endregion private Variables
#region Properties
public string SectorNumber
{
get { return sectorNumber; }
set { sectorNumber = value;}
}
public int BlockBegin
{
get { return blockBegin; }
set
{
blockBegin = value;
}
}
public bool IsSectorInUse
{
get { return isSectorInUse; }
set { isSectorInUse = value;}
}
public int BlockAmount
{
get { return blockAmount; }
set
{
blockAmount = value;;
}
}
#endregion Properties
public SectorModel()
{
}
}
ViewModel of Sector:
public class SectorViewModel : ViewModelBase
{
#region private Variables
SectorModel dataModel = new SectorModel();
ObservableCollection<BlockViewModel> sectorBlocks = new ObservableCollection<BlockViewModel>();
#endregion private Variables
#region Properties
public SectorModel DataModel
{
get { return dataModel; }
set { dataModel = value; }
}
public ObservableCollection<BlockViewModel> SectorBlocks
{
get { return sectorBlocks; }
set { sectorBlocks = value; NotifyPropertyChange ("SectorBlocks"); }
}
public string SectorNumber
{
get { return "Sektor " + DataModel.SectorNumber; }
set { DataModel.SectorNumber = value; NotifyPropertyChange ("SectorNumber"); }
}
public int BlockBegin
{
get { return DataModel.BlockBegin; }
set
{
DataModel.BlockBegin = value;
SetBlocks();
OnPropertyChanged("BlockBegin");
}
}
public bool IsSectorInUse
{
get { return DataModel.IsSectorInUse; }
set { DataModel.IsSectorInUse = value; NotifyPropertyChange ("IsSectorInUse"); }
}
public int BlockAmount
{
get { return DataModel.BlockAmount; }
set
{
DataModel.BlockAmount = value;
SetBlocks();
NotifyPropertyChange ("CodingBlockAmount");
}
}
#endregion Properties
void SetBlocks()
{
while (SectorBlocks.Count != BlockAmount)
{
SectorBlocks.Add(new BlockViewModel());
}
int begin = BlockBegin;
foreach (BlockViewModel block in SectorBlocks)
{
block.CodingBlockName = "Block " + begin.ToString().PadLeft(2, '0');
block++;
}
}
public SectorViewModel()
{
SetBlocks();
}
}
View of Sector:
<UserControl xmlns:Views="clr-namespace:…/RFIDControls" x:Class="…/Sector"
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="300" d:DesignWidth="473">
<Border BorderBrush="Black" BorderThickness="0,0,0,1">
<Expander Name="expMain" Margin="0,0,4,0">
<Expander.Header>
<Grid Name="grdHeader">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="300" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Height="24" Text="{Binding SectorNumber}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="14" FontWeight="Bold" Panel.ZIndex="98"/>
<CheckBox Grid.Column="2" VerticalAlignment="Center" IsChecked="{Binding IsSectorInUse}"></CheckBox>
</Grid>
</Expander.Header>
<Grid>
<ListBox ItemsSource="{Binding SectorBlocks}" Name="listBox">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type Views:BlockViewModel}">
<Views:Block/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Expander>
</Border>
Thank you.
With kind regards from Germany
Dominik
PS: I hope my English is not so bad as I suppose

This is a common problem for new users of WPF. You have two possible solutions. When using MVVM, you shouldn't need to set the DataContext of the UserControl anywhere. Instead, you can simply add a DataTemplate to your App.xaml to make the pairing:
<DataTemplate DataType="{x:Type ViewModels:BlockViewModel}">
<Views:BlockView />
</DataTemplate>
In this way, whenever you show an instance of your BlockViewModel, the Framework will display the related BlockView instead (like you have done in your SectorView class).
The alternative option is to not use MVVM for the UserControl (use Bindable DependencyPropertys instead), to not set its DataContext internally and to use RelativeSource Bindings on the elements inside instead:
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding DataContext.BlockName,
RelativeSource={RelativeSource AncestorType={
x:Type YourXmlNamespacePrefix:BlockView}}}" HorizontalAlignment="Left"
VerticalAlignment="Center" FontSize="14" Margin="2,6"/>
Using this method, the RelativeSource Binding will look at whatever object is currently set as the DataContext.

Sounds like Block act as an control, which seems participate in other usercontrol or part of Template, in my opinion, mvvm doesn't work in here, you should use Dependency property instead.
Forgive my poor english.

Categories

Resources