- Details
- Written by: Stanko Milosev
- Category: WPF
- Hits: 5015
First model:
public class FirstModel
{
public string HelloWorld { get; set; }
public FirstModel()
{
HelloWorld = "First model";
}
}
Second model:
public class SecondModel
{
public string HelloWorld { get; set; }
public SecondModel()
{
HelloWorld = "Second model";
}
}
XAML:
<Window x:Class="TwoDataContext.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:twoDataContext="clr-namespace:TwoDataContext"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<twoDataContext:FirstModel x:Key="FirstModel" />
<twoDataContext:SecondModel x:Key="SecondModel" />
</Grid.Resources>
<TextBox DataContext = "{StaticResource FirstModel}" HorizontalAlignment="Left" Height="23" Margin="178,64,0,0" TextWrapping="Wrap" Text="{Binding HelloWorld}" VerticalAlignment="Top" Width="120"/>
<TextBox DataContext = "{StaticResource SecondModel}" HorizontalAlignment="Left" Height="23" Margin="178,120,0,0" TextWrapping="Wrap" Text="{Binding HelloWorld}" VerticalAlignment="Top" Width="120"/>
</Grid>
</Window>
Example you can download from here.
- Details
- Written by: Stanko Milosev
- Category: WPF
- Hits: 16210
Let's first add RelayCommand class:
class RelayCommand: ICommand
{
private Action<object> _action;
public RelayCommand(Action<object> action)
{
_action = action;
}
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object parameter)
{
if (parameter != null)
{
_action(parameter);
}
else
{
_action("Hello world");
}
}
public event EventHandler CanExecuteChanged;
}
ICommand is an interface, and automatically you will receive methods which you have to implement. Now "click model":
public class MVVMButtonClickViewModel
{
public MVVMButtonClickViewModel()
{
MVVMClick = new RelayCommand(new Action<object>(ShowMessage));
}
private ICommand m_ButtonCommand;
public ICommand MVVMClick
{
get { return m_ButtonCommand; }
set { m_ButtonCommand = value; }
}
public void ShowMessage(object obj)
{
MessageBox.Show("Test");
}
}
and XAML:
<Window x:Class="MVVMButtonClick.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MVVMButtonClick.ViewModel"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MVVMButtonClickViewModel />
</Window.DataContext>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="247,134,0,0" VerticalAlignment="Top" Width="75" Command="{Binding MVVMClick}"/>
</Grid>
</Window>
As you can see, in button node, we have attribute like: Command="{Binding MVVMClick}, and of course don't forget to add DataContext, like:
<Window.DataContext>
<local:MVVMButtonClickViewModel />
</Window.DataContext>
Example you can download from here.
- Details
- Written by: Stanko Milosev
- Category: WPF
- Hits: 5331
How to have button stretched over all window width: XAML:
<Window x:Class="DIexamples.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">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Content="Button" Margin="0,23,0,0" VerticalAlignment="Top" />
<Button Content="Button" Margin="0,0,0,0" VerticalAlignment="Top" />
</Grid>
</Window>
Important lines to notice are:
<Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
And attribute: Margin="0,23,0,0"
- Details
- Written by: Stanko Milosev
- Category: WPF
- Hits: 6096
Start new WPF application. Add TreeView control from toolbox.
Add one label.
My XAML looks like this:
<Window x:Class="MVVMtreeView.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">
<Grid>
<TreeView HorizontalAlignment="Left" Height="206" Margin="10,10,0,0" VerticalAlignment="Top" Width="497"/>
<Label Content="Label" HorizontalAlignment="Left" Margin="10,284,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.421,0.462" Width="497"/>
</Grid>
</Window>
Then add model, I called it TreeViewModel, and it looks like this:
namespace MVVMtreeView
{
public class TreeViewModel
{
public List<string> TreeViewModels { get; set; }
public TreeViewModel()
{
TreeViewModels = new List<string>();
TreeViewModels.Add("test");
}
}
}
In "code behind", in MainWindow.xaml.cs, in MainWindow method, add line DataContext = new TreeViewModel(); so, in my case MainWindow.xaml.cs looks like this:
namespace MVVMtreeView
{
///
/// Interaction logic for MainWindow.xaml
///
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new TreeViewModel();
}
}
}
Now, bind tree view to a model, that means in the XAML (in my case MainWindow.xaml), add ItemsSource="{Binding Path=TreeViewModels}", I also add name to a tree view, then bind label content, so now my XAML looks like this:
<Window x:Class="MVVMtreeView.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">
<Grid>
<TreeView Name="tv" ItemsSource="{Binding Path=TreeViewModels}" HorizontalAlignment="Left" Height="206" Margin="10,10,0,0" VerticalAlignment="Top" Width="497"/>
<Label Content="{Binding ElementName=tv, Path=SelectedItem}" HorizontalAlignment="Left" Margin="10,284,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.421,0.462" Width="497"/>
</Grid>
</Window>
Example you can download from here.