Display a User Control From Another User Control MVVM - c#

I currently have this method in my view model which is triggered when the user clicks on a grid row:
public ICommand EmailPopUpCmd { get; set; }
private void EmailPopUp(object sender) {
//ToDo: pdf viewer pop up
var test = sender;
var email = new EmailView { DataContext = new MailVM() };
email.Visibility = Visibility.Visible;
}
The user control I want to display looks like this:
<UserControl x:Class="Sybrin.UI.MailViewer.Views.EmailView"
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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:fixed="clr-namespace:Telerik.Windows.Documents.Fixed;assembly=Telerik.Windows.Controls.FixedDocumentViewers"
xmlns:converters="clr-namespace:Telerik.Windows.Documents.Converters;assembly=Telerik.Windows.Controls.FixedDocumentViewers"
xmlns:local="clr-namespace:Sybrin.UI.MailViewer.Helpers"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
DataContext="{Binding}">
<Grid>
<Grid.Resources>
<local:BoolToDisplayConverter x:Key="BoolToDisplayConverter"/>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.25*" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<telerik:RadToolBar DataContext="{Binding ElementName=pdfViewer, Path=CommandDescriptors}">
<telerik:RadToolBar.Resources>
<converters:FixedDocumentViewerModeConverter x:Key="ModeConverter"/>
</telerik:RadToolBar.Resources>
<telerik:RadToggleButton IsChecked="{Binding FixedDocumentViewer.Mode, Mode=TwoWay, Converter={StaticResource ModeConverter}, ConverterParameter=Pan}"
Margin="2"
Padding="0"
IsBackgroundVisible="False"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
>
<ToolTipService.ToolTip>
<TextBlock Text="Pan" />
</ToolTipService.ToolTip>
<Image Source="pack://application:,,,/Telerik.Windows.Controls.FixedDocumentViewers;component/Images/hand-free.png"
Stretch="None" />
</telerik:RadToggleButton>
<telerik:RadToggleButton IsChecked="{Binding FixedDocumentViewer.Mode, Mode=TwoWay, Converter={StaticResource ModeConverter}, ConverterParameter=TextSelection}"
Margin="2" Padding="0"
IsBackgroundVisible="False"
HorizontalAlignment="Left"
VerticalAlignment="Stretch">
<ToolTipService.ToolTip>
<TextBlock Text="Text Selection" />
</ToolTipService.ToolTip>
<Image Source="pack://application:,,,/Telerik.Windows.Controls.FixedDocumentViewers;component/Images/text-selection.png"
Stretch="None" />
</telerik:RadToggleButton>
</telerik:RadToolBar>
<telerik:RadPdfViewer x:Name="pdfEmailViewer"
Grid.Row="2"
DocumentSource="Sybrin.UI.MailViewer;Resources/TestPDF.pdf"/>
</Grid>
Now the above method does not display my user control. Any ideas as to why not?

Ideally you should open this User Control in other Window.
Take a new Window and add this User Control to that view (in xaml). Then create an instance of that Window in your button command handler and just using Open() method of window should do job.
Window myWindow = new Window();
myWindow.Open();
This is not a very good MVVM way though!

You can add the user control to the xaml view where you want it to be displayed and keep the visibility bound to a property. Let the value be collapsed at the beginning. Change it to visible when you want the control to be visible.
eg:
<Grid>
<EmailView Visibility= "{Binding ControlVisibility}" />
</Grid>
public ICommand EmailPopUpCmd { get; set; }
private void EmailPopUp(object sender) {
ControlVisibility = Visible;
}
private Visibility _controlVisibility = Collapsed;
public Visibility ControlVisibility
{
get
{
return _controlVisibility;
}
set
{
_controlVisibility = value;
OnPropertyChanged("ControlVisibility");
}
}
Make sure that you implement INotifyPropertyChanged for the visibility change to reflect in the UI

Related

Data Binding to User Control Error Data.Binding cannot be converted to System.String

I'm new to WPF and I'm having trouble binding text to a user control I made. It's a simple control, it's just basically a button with text and a image that I want to reuse in several Views.
Here is my User Control's .cs
public partial class MenuItemUserControl : UserControl
{
public string TextToDisplay { get; set; }
public MenuItemUserControl()
{
InitializeComponent();
DataContext = this;
}
}
Here is my User Control's xaml
<UserControl x:Class="Class.Controls.MenuItemUserControl"
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:Class.Controls"
mc:Ignorable="d"
d:DesignHeight="83.33" d:DesignWidth="512">
<Grid>
<Button Style="{StaticResource MenuItemStyle}" Height="Auto" Width="Auto">
<DockPanel LastChildFill="True" Width="512" Height="83.33" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="/Resources/MenuArrow.png" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Center" DockPanel.Dock="Left"/>
<TextBlock d:Text="sample" Text="{Binding TextToDisplay, Mode=OneWay}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="{StaticResource MenuItems}"/>
</DockPanel>
</Button>
</Grid>
</UserControl>
Here is my View xaml
<Page x:Class="Class.Views.MenuOperate"
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:uc="clr-namespace:Class.Controls"
xmlns:local="clr-namespace:Class.Views"
xmlns:properties="clr-namespace:Class.Properties"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" xmlns:viewmodels="clr-namespace:Class.ViewModels" d:DataContext="{d:DesignInstance Type=viewmodels:MenuOperateViewModel}"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="1024"
Title="MenuOperate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="83.33"/>
<RowDefinition Height="83.33"/>
<RowDefinition Height="83.33"/>
<RowDefinition Height="83.33"/>
<RowDefinition Height="83.33"/>
<RowDefinition Height="83.33"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="512"/>
<ColumnDefinition Width="512"/>
</Grid.ColumnDefinitions>
<uc:MenuItemUserControl TextToDisplay="{Binding StartStop, Mode=TwoWay}" Grid.Row="0" Grid.Column="0"/>
</Grid>
</Page>
Here is my View Model .cs
namespace Class.ViewModels
{
public class MenuOperateViewModel : ObservableObject
{
private string? _StartStop;
public MenuOperateViewModel()
{
StartStop = Properties.Resources.MenuOperateStart;
}
public string? StartStop
{
get => _StartStop;
set => SetProperty(ref _StartStop, value);
}
}
}
This is the error I get in my View Xaml:
Object of Type 'System.Windows.Data.Binding' cannot be converted to type 'System.String'.
There are two things that prevent that the expression
TextToDisplay="{Binding StartStop}"
works.
The target property of the Binding, i.e. TextToDisplay must be a dependency property.
You must not explicity set the UserControl's DataContext. The Binding will resolve the source property path relative to the current DataContext, i.e. with DataContext = this; in the control's constructor, it expects the source property StartStop on the UserControl, which is obviously wrong.
For details, see Data binding overview
Your code should look like this:
public partial class MenuItemUserControl : UserControl
{
public static readonly DependencyProperty TextToDisplayProperty =
DependencyProperty.Register(
nameof(TextToDisplay),
typeof(string),
typeof(MenuItemUserControl));
public string TextToDisplay
{
get { return (string)GetValue(TextToDisplayProperty); }
set { SetValue(TextToDisplayProperty, value); }
}
public MenuItemUserControl()
{
InitializeComponent();
}
}
The Binding in the UserControl's XAML would then use a RelativeSource Binding.
<TextBlock Text="{Binding TextToDisplay,
RelativeSource={RelativeSource AncestorType=UserControl}}" />

View(User Control)'s binded properties stop working after being nested in a MainWindow

I'm currently new to WPF and I created a sample project to work on using MVVMCross framework following the MVVM setup. So far I'm using the MainWindow.xaml to be the parent of my child view (StudentDetailsView.xaml). At first I had only my child view and all the bindings worked out fine, but after I added the child view to my parent view as a nested view, all the bindings stopped working. For example, the FirstName and LastName property stopped working with their two way mode Binding to update the FullName property.
MainWindow.xaml
<views:MvxWindow
xmlns:views="clr-namespace:MvvmCross.Platforms.Wpf.Views;assembly=MvvmCross.Platforms.Wpf"
x:Class="MvxStarter.Wpf.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:MvxStarter.Wpf.Views"
xmlns:vm="clr-namespace:MvxStarter.Core.ViewModels;assembly=MvxStarter.Core"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid x:Name="OuterGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Grid.Column="1">
<StackPanel>
<Menu>
<MenuItem Header="_File">
<MenuItem Header="FileOption1"/>
</MenuItem>
<MenuItem Header="_Options">
<MenuItem Header="Option1"/>
</MenuItem>
</Menu>
<Grid>
<!--Dynamic view switch out here-->
<local:StudentDetailsView/>
</Grid>
</StackPanel>
</Grid>
</Grid>
</views:MvxWindow>
MainWindow.xaml.cs
using MvvmCross.Platforms.Wpf.Views;
using System.Windows.Controls;
namespace MvxStarter.Wpf
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : MvxWindow
{
public MainWindow()
{
InitializeComponent();
}
}
}
StudentDetailsView.xaml
<views:MvxWpfView
xmlns:views="clr-namespace:MvvmCross.Platforms.Wpf.Views;assembly=MvvmCross.Platforms.Wpf"
xmlns:mvx="clr-namespace:MvvmCross.Platforms.Wpf.Binding;assembly=MvvmCross.Platforms.Wpf"
x:Class="MvxStarter.Wpf.Views.StudentDetailsView"
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:MvxStarter.Wpf.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800" FontSize="20">
<Grid>
<StackPanel Margin="5">
<TextBlock Text="{Binding FullName}" FontSize="28" Margin="0,0,0,15"/>
<TextBlock Text="First Name"/>
<TextBox Text="{Binding FirstName, Mode=TwoWay}" Margin="0,0,0,15"/>
<TextBlock Text="Last Name"/>
<TextBox Text="{Binding LastName, Mode=TwoWay}" Margin="0,0,0,15"/>
</StackPanel>
</Grid>
</views:MvxWpfView>
StudentDetailsViewModel.cs
using MvvmCross.Logging;
using MvvmCross.Navigation;
using MvvmCross.ViewModels;
namespace MvxStarter.Core.ViewModels
{
public class StudentDetailsViewModel : MvxViewModel
{
public StudentDetailsViewModel()
{
}
private string _firstName;
public string FirstName
{
get { return _firstName; }
set
{
SetProperty(ref _firstName, value);
RaisePropertyChanged(() => FullName);
}
}
private string _lastName;
public string LastName
{
get { return _lastName; }
set
{
SetProperty(ref _lastName, value);
RaisePropertyChanged(() => FullName);
}
}
public string FullName => $"{FirstName} {LastName}";
}
}
Am I not correctly binding my properties once I set my child view within my parent view?
Eventually what I want to do is switch out my child views within the grid panel whenever the user selects a different view to see within the menu bar. The area drawn in red is where I want so switch out different views dependent on the user's choice.
Okay, after a little searching of the web and retracing my steps. I found out that the datacontext of my child view wasn't properly finding the viewmodel so I had to explicitly call it out in the .xaml like so
<views:MvxWpfView.DataContext>
<vm:StudentDetailsViewModel/>
</views:MvxWpfView.DataContext>
Not sure if that was the cleanest solution...

How to get my View set in the Content Presenter

I'm currently working on a database-based application for work and I am struggling with connecting the ViewModel methods to my view. Here is what I've got so far:
public class MainViewModel : BaseViewModel
{
public ICommand SwitchViewsCommand { get; private set; }
public MainViewModel()
{
SwitchViewsCommand = new RelayCommand((parameter) => CurrentView = (UserControl)Activator.CreateInstance(parameter as Type));
}
private UserControl _currentView;
public UserControl CurrentView
{
get
{
return _currentView;
}
set
{
if (value != _currentView)
{
_currentView = value;
OnPropertyChanged("CurrentView");
}
}
}
}
This is my MainViewModel and following my Xaml-Code
<Window x:Class="sKillPase.View.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="clr-namespace:sKillPase.Core.ViewModels;assembly=sKillPase.Core" xmlns:view="clr-namespace:sKillPase.View"
xmlns:local="clr-namespace:sKillPase.View"
d:DataContext="{d:DesignInstance Type=viewmodels:MainViewModel}"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="1200">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Border x:Name="Top" Grid.Column="0" Grid.ColumnSpan="2" Background="Black" ></Border>
<Border x:Name="Buttons" Grid.Row="1" Grid.RowSpan="2" Background="Black"></Border>
<Border x:Name="Content" Grid.Row="1" Grid.Column="1" Background="#FF303030"></Border>
<Border x:Name="Bottom" Grid.Row="2" Grid.Column="1" Background="Black"/>
<ContentPresenter Grid.Row="1" Grid.Column="1" x:Name="ContentArea" Content="{Binding CurrentView}"/>
<StackPanel x:Name="ButtonPanel" Margin="5" Grid.Row="1">
<Button x:Name="Data"
Command="{Binding SwitchViewsCommand }"
CommandParameter="{x:Type local:DataView}"
>
Daten bearbeiten
</Button>
<Button x:Name="Report"
Command="{Binding SwitchViewsCommand}"
CommandParameter="{x:Type viewmodels:ReportViewModel}"
>
Report erstellen
</Button>
</StackPanel>
</Grid>
So my problem is, that if I compile the application, the Content Presenter doesn't show anything. It stays completely empty. So what can I do to add the different views (which I declared as User Controls) to my Content Presenter, by pressing one of the two buttons?
Furthermore, one of the views contains a data grid that shows the different tables of my database. So if I have to watch out for some problems regarding the database, please feel free to state.
Thanks in advance :)

How do I get my custom UserControl to set the colour of a nested ellipse?

I've been poking around at various links and I can't tell if I need a DependencyProperty, INotifyPropertyChanged, some kind of binding or something else.
I'm working on my first UserControl for re-use purposes. I have a UserControl that contains a label and a coloured ellipse. I want to be able to set the Ellipse colour in the windows XAML at design time. I have the following code in Visual Studio 2013 Community:
<UserControl x:Class="DMS2.LegendLabel"
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">
<StackPanel Orientation="Horizontal">
<Ellipse Name="Indicator" Height="10" Width="10" Margin="5" Fill="Aqua"/>
<Label> value </Label>
</StackPanel>
namespace DMS2
{
public partial class LegendLabel : UserControl
{
public LegendLabel()
{
InitializeComponent();
}
private Brush ellipse_color = Brushes.Azure;
public Brush LegendColor
{
get { return ellipse_color; }
set { ellipse_color = value; Indicator.Fill = ellipse_color; }
}
}
}
<Window x:Class="DMS2.ReportMonitor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:custom_controls="clr-namespace:DMS2"
Title="Report Monitor" Height="450" Width="850">
<StackPanel Orientation="Vertical" Name="MainPanel">
<StackPanel Orientation="Horizontal" Name="ButtonPanel">
<Button Height="25" Margin="30,0"> Refresh List</Button>
<CheckBox Margin="10"> show Reports From All Users</CheckBox>
<Grid Margin="10" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<custom_controls:LegendLabel LegendColor="Red">Pending</custom_controls:LegendLabel>
<custom_controls:LegendLabel Grid.Column="1" LegendColor="Green">Viewed</custom_controls:LegendLabel>
<custom_controls:LegendLabel Grid.Column="2" LegendColor="Blue">Active</custom_controls:LegendLabel>
<Label Grid.Row="1">Done</Label>
<Label Grid.Column="1" Grid.Row="1">Error</Label>
<Label Grid.Column="2" Grid.Row="2">Closed</Label>
</Grid>
<Button Height="25" Margin="30,0">Close</Button>
</StackPanel>
</StackPanel>
</Window>
Using the LegendColor as shown below has now effect. How can I make the following work?
<custom_controls:LegendLabel LegendColor="Red">Pending</custom_controls:LegendLabel>
Yes, you would typically use a DependencyProperty here (snippet: propdp).
public Brush LegendColor
{
get { return (Brush)GetValue(LegendColorProperty); }
set { SetValue(LegendColorProperty, value); }
}
// Using a DependencyProperty as the backing store for Value. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LegendColorProperty =
DependencyProperty.Register("LegendColor", typeof(Brush), typeof(LegendLabel), new PropertyMetadata(null, HandleBrushChange));
Once you have it, you would perform your set in the PropertyChanged handler (the second argument to the metadata):
private static void HandleBrushChange(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
LegendLabel local = (LegendLabel)d;
local.Indicator.Fill = e.NewValue as Brush;
}

How to show data from selected item in listbox wpf using mvvm?

I am just doing some practice on WPF & MVVM forms
So far, I have just completed the normal Listbox with data loaded from an array, that when the index changes, it loads other data into textblocks on the form
I would like to change this example however. I want the user to select a field in the listbox, then click a button to display all the other data
So, the form is (usercontrol):
And when someone selects, say Cena, they will see the data on the right filled out.
My code for the .xaml is:
<UserControl x:Class="SuperstarsRoster.RosterView"
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:SuperstarsRoster"
xmlns:WpfToolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600">
<UserControl.DataContext>
<local:RosterViewModel/>
</UserControl.DataContext>
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--SelectedItem="{Binding SelectedPerson}"-->
<ListBox Grid.Column="0" Margin="0"
ItemsSource="{Binding RosterList}"
DisplayMemberPath="Name"
Name="lstRoster"
Height="250"
VerticalAlignment="Top"/>
<Button Content="Exit" Height="23" HorizontalAlignment="Left" VerticalAlignment="Bottom" Name="btnExit" Width="150" Command="{Binding ButtonCommand}" CommandParameter="Hai" />
<Grid x:Name="PersonDetails" Grid.Column="1" DataContext="{Binding SelectedPerson}" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Person Details" FontSize="15"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Name"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Name,Mode=TwoWay}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Brand"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Brand,Mode=TwoWay}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Type"/>
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Type,Mode=TwoWay}"/>
<Button Grid.Row="4" Content="Choose" Height="23" HorizontalAlignment="Left" VerticalAlignment="Bottom" Name="btnChoose" Width="90" Command="{Binding ChooseCommand}" CommandParameter="{Binding ElementName=lstRoster,Path=SelectedPerson}" />
</Grid>
</Grid>
my problem is the Show button:
<Button Grid.Row="4" Content="Choose" Height="23" HorizontalAlignment="Left" VerticalAlignment="Bottom" Name="btnChoose" Width="90" Command="{Binding ChooseCommand}" CommandParameter="{Binding ElementName=lstRoster,Path=SelectedPerson}" />
I don't know what to do here. I don't know if the CommandParameters should be empty, or have something in it.
My ViewModel code is:
#region Show Button
private ICommand m_ShowCommand;
public ICommand ShowCommand
{
get
{
return m_ShowCommand;
}
set
{
m_ShowCommand = value;
}
}
public void Selected(object obj)
{
RaisePropertyChanged("SelectedPerson");
}
#endregion
I have a feeling my Selected is the incorrect piece of code. On the ViewModel code there is also:
#region Roster Details
public ObservableCollection<Roster> rosterList;
public Roster selectedPerson;
public RosterViewModel()
{
ButtonCommand = new RelayCommand(new Action<object>(ShowMessage));
ShowCommand = new RelayCommand(new Action<object>(Selected));
rosterList = new ObservableCollection<Roster>()
{
new Roster(){Name="Batista", Brand="Smackdown!", Type="Heel"},
new Roster(){Name="The Rock", Brand="RAW", Type="Face"},
new Roster(){Name="John Cena", Brand="RAW", Type="Face"},
new Roster(){Name="Randy Orton", Brand="Smackdown!", Type="Heel"}
};
RaisePropertyChanged("SelectedPerson");
}
#endregion
With the ShowCommand being the button event, but I don't know what to put here.
Ideally, user selects Cena, clicks show, and the textblocks will fill with the data from the array.
My RelayCommand class (the default for all button clicks) looks like so:
class RelayCommand : ICommand
{
private Action<object> _action;
public RelayCommand(Action<object> action)
{
_action = action;
}
#region ICommand Members
public bool CanExecute(object parameter)
{
return true;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
_action(parameter);
}
#endregion
Should there be something more here? Or in the ViewModel?
I'm using MVVM, so there is no code in my code behind class.
The Exit button works, that's why I know the commands will work.
EDIT
I changed some of the code now. Firstly, the show button was sitting in a grid that had a datacontext setting. That was taken out. Next, both buttons share the same command (ButtonCommand), but both have different parameters. Exit is "Exit", and choose is "Hai"
In the ViewModel code, the following was added and changed
public string Name { get; set; }
public string Brand { get; set; }
public string Type { get; set; }
#region Button Work
private ICommand m_ButtonCommand;
public ICommand ButtonCommand
{
get
{
return m_ButtonCommand;
}
set
{
m_ButtonCommand = value;
}
}
public void DoAction(object obj)
{
if (obj.ToString() == "Hai")
{
if (selectedPerson != null)
{
this.Name = selectedPerson.Name;
this.Brand = selectedPerson.Brand;
this.Type = selectedPerson.Type;
RaisePropertyChanged(null);
}
}
if (obj.ToString() == "Exit")
{
MessageBox.Show("This program will now close");
Environment.Exit(0);
}
}
#endregion
This way, data is set and I can populate the fields when wanted.
Along with initializing it first
public RosterViewModel()
{
ButtonCommand = new RelayCommand(new Action<object>(DoAction));
So, it works now.
You have a couple of choices really:
(1) Have a VM property that is bound to the SelectedItem of your ListBox, and then you don't need to send any parameters with your button command ... you can just perform your ChooseCommand on the currently SelectedItem (as known by you VM).
or
(2) Pass in the SelectedItem as a parameter on your command, like this ...
<Button Grid.Row="4" Content="Choose" Height="23" HorizontalAlignment="Left"
VerticalAlignment="Bottom" Name="btnChoose" Width="90"
Command="{Binding ChooseCommand}"
CommandParameter="{Binding ElementName=MyListBox,Path=SelectedItem}" />
Note that you will need to give your ListBox a name (x:Name="MyListBox") and that your CommandParameter is referring to that ListBox, and its SelectedItem property.

Categories

Resources