Develop Reference

UserControl get updated data from MainWindow

I have 2 UserControl, where the Usercontrol should get the Updated Data from MainWindow
<Window x:Class="BindingUserControl.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:local="clr-namespace:BindingUserControl.Pages"
xmlns:local1="clr-namespace:BindingUserControl"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<local1:CommonViewModel x:Key="ABC"/>
</Window.Resources>
<Grid>
<local:UserControl1 DataContext="{Binding Source={StaticResource ABC}}" Margin="0,0,520.6,264"/>
<TextBox Width ="100" Height="100" Text="{Binding CommonProperity}"/>
<Button Width="100" Height="100" RenderTransformOrigin="-1.85,1.404" Margin="139,208,554.6,112" Click="Button_Click"></Button>
</Grid>
UserControl
<UserControl x:Class="BindingUserControl.Pages.UserControl1"
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:BindingUserControl"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<Local:CommonViewModel x:Key="ABC"/>
</UserControl.Resources>
<Grid DataContext="{Binding Source={StaticResource ABC}}" >
<TextBox Width="100" Height="100" Text="{Binding CommonProperity ,Mode=TwoWay}" />
</Grid>
Viewmodel
namespace BindingUserControl
{
class CommonViewModel: INotifyPropertyChanged
{
private string _Localtextdata;
public string CommonProperity
{
get { return _Localtextdata; }
set
{
_Localtextdata = value;
INotifyPropertyChanged("CommonProperity");
}
}
private void INotifyPropertyChanged(string ProperityName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(ProperityName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
There is no updated text in the usercontrol textbox when ever the Mainwindow textbox get any entry.
Where is my mistake?

You should only create one instance of CommonViewModel and let the UserControl inherit the DataContext from the window. Don't explicitly set the DataContext of the UserControl or any its child elements somewhere:
<Window x:Class="BindingUserControl.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:local="clr-namespace:BindingUserControl.Pages"
xmlns:local1="clr-namespace:BindingUserControl"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<!-- Set the DataContext property -->
<Window.DataContext>
<local1:CommonViewModel x:Key="ABC"/>
</Window.DataContext>
<Grid>
<local:UserControl1 Margin="0,0,520.6,264"/>
<TextBox Width ="100" Height="100" Text="{Binding CommonProperity}"/>
<Button Width="100" Height="100" RenderTransformOrigin="-1.85,1.404" Margin="139,208,554.6,112" Click="Button_Click"></Button>
</Grid>
</Window>
<UserControl x:Class="BindingUserControl.Pages.UserControl1"
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:BindingUserControl"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<TextBox Width="100" Height="100" Text="{Binding CommonProperity ,Mode=TwoWay}" />
</Grid>
</UserControl>

WPF Binding TabControl TabItem

I am relatively new to MVVM in WPF and have been trying to solve an issue for several days now. I am using the dragablz tab control and binding the ItemsSource which is an ObservableList of objects. The content of the Tab Item is a UserControl, however; its datacontext is null. I've created a simple setup to demonstrate the issue I'm having:
Model/ViewModel Classes:
public class Item
{
public string Header { get; set; }
public ItemContent Body { get; set; }
}
public class ItemContent
{
public string Name { get; set; }
public string Description { get; set; }
}
class MainWindowViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName]string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public ObservableCollection<Item> Items { get; set; }
}
Main Window XAML
<Window x:Class="WpfTestApplication.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:local="clr-namespace:WpfTestApplication"
xmlns:views="clr-namespace:WpfTestApplication.ViewModels"
xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
xmlns:dockablz="clr-namespace:Dragablz.Dockablz;assembly=Dragablz"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<views:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Button Name="btnAdd" Content="Add" Click="btnAdd_Click" />
<dockablz:Layout Grid.Row="1">
<dragablz:TabablzControl HeaderMemberPath="Header" ItemsSource="{Binding Items}" SelectedIndex="1">
<dragablz:TabablzControl.ContentTemplate>
<DataTemplate DataType="{x:Type views:Item}">
<local:TabItemControl />
</DataTemplate>
</dragablz:TabablzControl.ContentTemplate>
</dragablz:TabablzControl>
</dockablz:Layout>
</Grid>
</Window>
Tab Item XAML
<UserControl x:Class="WpfTestApplication.TabItemControl"
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:WpfTestApplication"
xmlns:views="clr-namespace:WpfTestApplication.ViewModels"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<views:ItemContent />
</UserControl.DataContext>
<Grid>
<TextBox Text="{Binding Body}" />
</Grid>
</UserControl>
And the btnAdd_Click event
Note that I don't use this in my actual code but it was a fast and dirty way to add tab items dynamically without adding a command.
private void btnAdd_Click(object sender, RoutedEventArgs e)
{
((ViewModels.MainWindowViewModel)DataContext).Items.Add(new ViewModels.Item() { Header = "New One", Body = new ViewModels.ItemContent() { Name = "This One" } });
}

Will answered my question in the comment to the original question. I used his answer to another post: https://stackoverflow.com/a/44729258/1228 to do the following.
I removed this from my UserControl:
<UserControl.DataContext>
<views:ItemContent />
</UserControl.DataContext>
I then added a dependency property called Body to my UserControl code behind:
public static readonly DependencyProperty BodyProperty =
DependencyProperty.Register("Body",
typeof(ViewModels.ItemContent),
typeof(TabItemControl),
new PropertyMetadata(null));
public ViewModels.ItemContent Body
{
get
{
return (ViewModels.ItemContent)GetValue(BodyProperty);
}
set
{
SetValue(BodyProperty, value);
}
}
public string BodyText {
get
{
return Body?.Name;
}
set
{
if (Body != null)
{
Body.Name = value;
}
}
}
I updated my MainWindow's Tab control ContentTemplate as such:
<dragablz:TabablzControl.ContentTemplate>
<DataTemplate DataType="{x:Type views:ItemContent}">
<local:TabItemControl Body="{Binding Body}" />
</DataTemplate>
</dragablz:TabablzControl.ContentTemplate>
And changed my UserControl to use the BodyText property for the value of the TextBox:
<Grid x:Name="LayoutRoot">
<TextBox Text="{Binding BodyText}" />
</Grid>

How to change UserControl inside of ContentControl in wpf c# programmatically

I have MainWindow.xaml that has ContentControl.
I have 4 UserControls that i created.
I want to change content of ContentControl in MainWindow.xaml when button pressed inside of my UserControl.
Here is my MainWindow.xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:KIOSK" mc:Ignorable="d" x:Class="KIOSK.MainWindow"
Title="MainWindow" Height="350" Width="525" WindowState="Maximized">
<ContentControl Name="contentMain">
<local:main_screen />
</ContentControl>
</Window>
Here my UserControls:
1)main_screen.xaml
<UserControl x:Class="KIOSK.main_screen"
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="300">
<Grid Name="grid1" ShowGridLines="True">
<Button Margin="10" Background="#FFA4F200" Click="Button_Click"/>
</Grid>
</UserControl>
2) ClubRules.xaml
<UserControl x:Class="KIOSK.ClubRules"
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="300" Background="White">
<Grid ShowGridLines="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="grid1">
<Button Margin="0,15,0,15" Background="#FFFE0555" HorizontalAlignment="Center" Click="Button_Click" />
</Grid>
</UserControl>
Inside of main_creen.xaml.cs i wrote for button pressed:
ClubRules cr = new ClubRules();
MainWindow mw = new MainWindow();
mw.contentMain.Content = new ClubRules();
But its not working..
I want to change Content of ContentControl inside of UserControl when button pressed.

Use delegates and events for your scenario.
Publish an event main_screen.xaml.cs and Subscribe the event in MainWindow.xaml.cs
Publish the event
main_screen.xaml.cs
public partial class main_screen: UserControl
{
public Delegate del;
public main_screen()
{
InitializeComponent();
}
public void method1()
{
del.DynamicInvoke();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
method1();
}
}
Subscribe that event in MainWindow.xaml.cs
MainWindow.Xaml
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:KIOSK" mc:Ignorable="d" x:Class="KIOSK.MainWindow"
Title="MainWindow" Height="350" Width="525" WindowState="Maximized">
<ContentControl Name="contentMain">
<local:main_screen x:Name="main_screen_obj" />
</ContentControl>
</Window>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public delegate void ValuePassDelegate();
public event ValuePassDelegate ValuePassEvent;
public MainWindow()
{
InitializeComponent();
ValuePassEvent += new ValuePassDelegate(method1);
main_screen_obj.del = ValuePassEvent;
}
public void method1()
{
contentMain.Content = new ClubRules();
}
}

You are creating a new MainWindow() instead of using the one that is being displayed. You should be assigning the ClubRules to the Content of the one that is being displayed.
One way to do that is by bringing the button from the UserControl to the MainWindow itself. Other way as suggested by #decoherence is by using the singleton pattern.
There could be more ways, but you basically need to use the same instance of the MainWindow that has been displayed.

UserControl is not displayed

EDIT: It seems like that I needed to change the height of RowDefinition. Thanks goes to Alvaro. However:
how do I reference different elements inside my usercontrol (change their properties), when I want to change them in MainWindow.xaml and MainWindow.xaml.cs?
I have two XAML files in the same namespace.
MainWindow.xaml
List.xaml
When I try to add List.xaml usercontrol to my mainwindow xaml (that is insert xaml from another file), it does not show up.
I insert usercontrol that exists in Lemosystem namespace and inside View folder.
xmlns:lemoview="clr-namespace:Lemosystem.View"
I add usercontrol to my MainWindow.xaml:
<lemoview:List/>
Nothing shows up. Here is my List XAML (code is the default):
<UserControl x:Class="Lemosystem.View.List"
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="300">
<Grid>
<Label Content="What do you want to do today?" HorizontalAlignment="Left" Margin="10,96,-83,0" VerticalAlignment="Top" Height="44" Width="373" FontSize="24" FontWeight="Bold"/>
</Grid>
</UserControl>
I expect the label from my usercontrol to show up in MainWindow.xaml GUI, but it doesn't.
MainWindow.xaml
<Window x:Class="Lemosystem.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lemocontroller="clr-namespace:Lemosystem.Controller"
xmlns:lemoview="clr-namespace:Lemosystem.View"
Title="{Binding Path=SystemName}" Height="603" Width="827"
ResizeMode="NoResize" WindowStartupLocation="Manual"
>
<Grid Name="Window" Margin="0,0,2,0">
<Grid.RowDefinitions>
<RowDefinition Height="0*"/>
<RowDefinition/>
</Grid.RowDefinitions>
...
<lemoview:List/>
...
</Grid>
</Window>
And how do I reference different elements inside my usercontrol (change their properties), when I want to change them in MainWindow.xaml and MainWindow.xaml.cs?

So, I created a project with :
List.Xaml
<UserControl x:Class="WpfApplication1.List"
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="300">
<Grid>
<Label Content="{Binding TextToDisplay}"
HorizontalAlignment="Left"
Margin="10,96,-83,0"
VerticalAlignment="Top"
Height="44"
Width="373"
FontSize="24"
FontWeight="Bold" />
</Grid>
</UserControl>
ListViewModel.cs:
public class ListViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
private string textToDisplay;
public string TextToDisplay
{
get { return textToDisplay; }
set { textToDisplay = value; OnPropertyChanged("TextToDisplay"); }
}
public ListViewModel(string value)
{
TextToDisplay = value;
}
}
}
MainWindow.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" Height="350" Width="525"
xmlns:lemoview="clr-namespace:WpfApplication1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button Content="Click Me" HorizontalAlignment="Center" Click="Button_OnClick"></Button>
<ListView Grid.Row="1" ItemsSource="{Binding MyList}"></ListView>
</Grid>
</Window>
MainWindow.xaml.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
MyList=new ObservableCollection<ListViewModel>();
}
private ObservableCollection<ListViewModel> myList;
public ObservableCollection<ListViewModel> MyList
{
get { return myList; }
set { myList = value; }
}
private void Button_OnClick(object sender, RoutedEventArgs e)
{
MyList.Add(new ListViewModel("MyValue"));
}
}
App.xaml:
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfApplication1="clr-namespace:WpfApplication1"
StartupUri="MainWindow.xaml">
<Application.Resources>
<DataTemplate DataType="{x:Type wpfApplication1:ListViewModel}">
<wpfApplication1:List />
</DataTemplate>
</Application.Resources>
in App.xaml, I just defined the binding between List.xaml and ListViewModel.cs
the viewModel of MainWindow is itself.
after every Click on the button, a new ViewModel is created, added to the list with a defined value (you will need to modify this part, to set the value you want).
I hope it will help you ! it works for me.

How do you like to show something, if you put it il a row that has height ="0" ?
change it to :
<Window x:Class="Lemosystem.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:lemocontroller="clr-namespace:Lemosystem.Controller"
xmlns:lemoview="clr-namespace:Lemosystem.View"
Title="{Binding Path=SystemName}" Height="603" Width="827"
ResizeMode="NoResize" WindowStartupLocation="Manual"
>
<Grid Name="Window" Margin="0,0,2,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<lemoview:List/>
</Grid>

Add a usercontrol to caliburm micro dynamically

I am using Caliburn Micro with WPF. I want to create an application with a menu on the left side, and a grid on the right side of the application. When clicking on a menu item, the grid on the right side, will change to another view. The another view will be in a separate file.
MainWindowView:
<UserControl x:Class="CMDemo.Views.MainWindowView"
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="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90*" />
<ColumnDefinition Width="210*" />
</Grid.ColumnDefinitions>
<StackPanel Name="LeftMenu">
<Button Name="ChangeDisplay" Content="Click Me"></Button>
<TextBlock x:Name="MyString"></TextBlock>
</StackPanel>
<Grid Grid.Column="1" x:Name="MainGridContent" />
</Grid>
MainWindowViewModel:
public class MainWindowViewModel : PropertyChangedBase
{
private UserControl mainGridContent;
private string myString;
public UserControl MainGridContent
{
get { return this.mainGridContent; }
set
{
this.mainGridContent = value;
NotifyOfPropertyChange(() => this.MainGridContent);
}
}
public string MyString
{
get { return this.myString; }
set
{
this.myString = value;
NotifyOfPropertyChange(() => this.MyString);
}
}
public void ChangeDisplay()
{
this.MainGridContent = new ChangeDisplayView();
this.MyString = "Testing....";
}
}
The changeDisplayViewModel:
public class changeDisplayViewModel: PropertyChangedBase
{
}
The changeDisplayView:
<UserControl x:Class="CMDemo.Views.changeDisplayView"
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="300">
<Grid>
<TextBox content="Hello Caliburn Micro">
</Grid>
When I click the "Click Me" button the TextBlock "MyString" is updated and showing, but the usercontrol is not. What am I doing wrong?

Try changing MainGridContent to a changeDisplayViewModel rather than the view itself.