I have creating following GridRow as UserControl
<UserControl x:Class="Project.Telematics_Plugin.GridRow"
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" BorderBrush="LightBlue"
MaxHeight="30" MinWidth="900">
<Grid>
<StackPanel Orientation="Horizontal">
<CheckBox VerticalAlignment="Center" IsChecked="{Binding IsChecked}" />
<TextBox Width="60" Text="{Binding EventId}"/>
<TextBox Width="300" Text="{Binding MethodName}" />
<ComboBox Width="200" ItemsSource="{Binding }" />
<ComboBox Width="200"/>
<ComboBox Width="200"/>
<Button Click="OnClickEdit">
<Image Source="Images/edit.png"/>
</Button>
<Button Click="OnClickDelete">
<Image Source="Images/delete.png"/>
</Button>
</StackPanel>
</Grid>
</UserControl>
Here is the code behind
public partial class GridRow : UserControl
{
public bool IsChecked { get; set; }
public int EventId { get; set; }
public string MethodName { get; set; }
public string Level { get; set; }
public string Opcode { get; set; }
public string Task { get;set; }
public string Keyword { get; set; }
public GridRow()
{
InitializeComponent();
}
private void OnClickEdit(object sender, RoutedEventArgs e)
{
}
private void OnClickDelete(object sender, RoutedEventArgs e)
{
}
}
Now can you please tell what important thing I missed to bind properties of code behind files to UI in TwoWay Mode..
Although this is not the MVVM way..
Add an x:Name to your control and bind to the properties using ElementName:
<UserControl x:Name="MyGridRow">
<Grid>
<StackPanel Orientation="Horizontal">
<CheckBox VerticalAlignment="Center" IsChecked="{Binding IsChecked, ElementName=MyGridRow}" />
<TextBox Width="60" Text="{Binding EventId, ElementName=MyGridRow}"/>
<TextBox Width="300" Text="{Binding MethodName, ElementName=MyGridRow}" />
<ComboBox Width="200" ItemsSource="{Binding Path=., ElementName=MyGridRow}" />
<ComboBox Width="200"/>
<ComboBox Width="200"/>
<Button Click="OnClickEdit">
<Image Source="Images/edit.png"/>
</Button>
<Button Click="OnClickDelete">
<Image Source="Images/delete.png"/>
</Button>
</StackPanel>
</Grid>
</UserControl>
If you want to support updating the values, you should use DependencyProperties instead of normal properties:
public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register("IsChecked", typeof(bool), typeof(GridRow));
public bool IsChecked
{
get { return (bool)GetValue(IsCheckedProperty); }
set { GetValue(IsCheckedProperty, value); }
}
when the DataContext where you use your usercontrol has all the properties IsChecked, EventId,MethodName ,..., then you can remove the properties from your usercontrol and all works.
but if you wanna create a "real" usercontrol then you should use DependencyProperties and bind them with the right expression within your usercontrol.
btw when you use Binding in WPF then its all about the right DataContext and the right BindingExpression
Related
So i have a view with an ItemsControl which is bound to some ObservableCollection. In the DataTemplate i need two buttons. When i try to bind these buttons to where i have defined them, and i start the application, nothing happens on button click.
The view:
<UserControl x:Class="GraphicalUserInterface.Views._2_ToDoList.ToDoListMainView"
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:GraphicalUserInterface.Views._2_ToDoList"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="600"
DataContext="{Binding Source={StaticResource Locator}, Path=ToDoListMain}">
<Grid>
<ItemsControl Margin="5" ItemsSource="{Binding ListEntries}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border CornerRadius="5" BorderThickness="2" BorderBrush="Black" Height="50" Margin="5">
<StackPanel Orientation="Horizontal" Margin="0,5">
<Label FontWeight="Bold">Customer:</Label>
<Label Content="{Binding Customer}" Margin="0,0,20,0"/>
<Label FontWeight="Bold">Trainer:</Label>
<Label Content="{Binding Trainer}" Margin="0,0,20,0"/>
<Label FontWeight="Bold">Date:</Label>
<Label Content="{Binding Date}" Margin="0,0,20,0"/>
<Label FontWeight="Bold">RequestType:</Label>
<Label Content="{Binding RequestType}" Margin="0,0,20,0"/>
<Button Margin="5" Width="100" CommandParameter="{Binding}" Command="{Binding Path=DataContext.ContactBtnClickCommand, RelativeSource= {RelativeSource FindAncestor,AncestorType={x:Type ItemsControl}}}">Contact</Button>
<Button Margin="5" Width="100" CommandParameter="{Binding}" Command="{Binding DataContext.AcceptBtnClickCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}">Accept</Button>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
The class:
public class ToDoListMainVM : ViewModelBase
{
private ObservableCollection<ToDoVM> listEntries;
public ObservableCollection<ToDoVM> ListEntries
{
get { return listEntries; }
set
{
listEntries = value;
RaisePropertyChanged();
}
}
SelectHandler selectHandler = new SelectHandler();
InsertHandler insertHandler = new InsertHandler();
DeleteHandler deleteHandler = new DeleteHandler();
NavigationService navService = new NavigationService();
public RelayCommand<ToDoVM> AcceptBtnClickCommand;
public RelayCommand<ToDoVM> ContactBtnClickCommand;
public ToDoListMainVM()
{
UpdateToDoList();
AcceptBtnClickCommand = new RelayCommand<ToDoVM>((p) =>
{
//Enter into database
insertHandler.InsertAppointmentToDatabase(new AppointmentVM()
{
Customer = p.Customer,
Date = p.Date,
Trainer = p.Trainer
});
//Make it instantly visible in the Calender
Messenger.Default.Send<NewAppointmentMessage>(new NewAppointmentMessage(p.Customer, p.Date));
//Delete from ToDo (View)
ListEntries.Remove(p);
//Delete from Db
deleteHandler.DeleteToDo(p);
//Set view to Calender
navService.NavigateTo("MyTrainingsMain");
});
View Model:
public class ToDoVM
{
public int ToDoVMID { get; set; }
public string RequestType { get; set; }
public DateTime Date { get; set; }
public CustomerVM Customer { get; set; }
public TrainerVM Trainer { get; set; }
}
The command properties need to be properties, with a getter. You can't bind to a field.
public RelayCommand<ToDoVM> AcceptBtnClickCommand { get; private set; }
public RelayCommand<ToDoVM> ContactBtnClickCommand { get; private set; }
The rest of your code is fine. The bindings are correct. You could simplify them slightly, but they work perfectly just the way you wrote them.
Command="{Binding DataContext.ContactBtnClickCommand, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
I have a ListView with a DataTemplate, inside this templates there are several textblocks and a button. The button has a contextmenu with fixed items. The binding of the listviewitems works fine, but binding a property to the contextmenu does not seem to work.
<ListView x:Name="lv_clients" Margin="0 22 0 0" SelectionMode="Single">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid Grid.Column="0" Grid.RowSpan="2" Background="{Binding StateColor}">
</Grid>
<TextBlock Grid.Column="1" Text="{Binding DisplayString}" Foreground="Black" Height="20" FontWeight="Bold" Padding="2,2,0,0" />
<Button Click="Button_ListItem_Click" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Anrufen" Name="mn_call" Click="mn_call_Click" DataContext={Binding Number} />
</ContextMenu>
</Button.ContextMenu> ...</Button>
<StackPanel Grid.Column="1" Grid.Row="1">
<TextBlock Text="{Binding State}" Height="20" Padding="2,2,0,0"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstEntry.KDKGRS}" Height="20" FontWeight="Bold" Padding="2,2,2,0" HorizontalAlignment="Left" Foreground="{Binding FirstEntry.ConvertedKGFARBE}" />
<TextBlock Text="{Binding FirstEntry.ADNAMI}" Height="20" Padding="0,2,0,0" HorizontalAlignment="Left" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have removed some unnecessary bits of the code (style and columndefinitions) for readability.
The important part is the MenuItem inside the Button. My underlying class has a public string property Number. This should be passed to the menu item. But the DataContext of the MenuItem is always null inside the click event.
I've read something about the contextmenu not beeing part of the visual tree, but I can't wrap my head around it. Could somebody explain the issue with the binding?
Edit Code for the underlying class:
Again removed some unnecessary code for the question
public class PhoneClient
{
public String Name { get; set; }
public String Number { get; set; }
public String Extension { get; set; }
public String DisplayString
{
get
{
return String.IsNullOrEmpty(Name) ? Number : String.Format("{0} ({1})", Name, Extension);
}
}
}
And the binding of the ListBox:
List<PhoneClient> clients = new List<PhoneClient>();
clients = load(); //returns active Clients
lv_clients.ItemsSource = clients;
Bridging the gap
<ContextMenu Tag="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
<MenuItem Header="Anrufen" Click="mn_call_Click" Name="mn_call"
DataContext="{Binding Tag.Number, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" />
</ContextMenu>
Handler
private void mn_call_Click(object sender, RoutedEventArgs e)
{
MenuItem currentMenuItem = (MenuItem)sender;
string number = (string)currentMenuItem.DataContext;
// Do Stuff
}
EDIT
MainWindow.xaml
<Window x:Class="WpfApp.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 Margin="10">
<ListView x:Name="lv_clients" Margin="0 22 0 0" SelectionMode="Single">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="LightGray" Width="100">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Background="LightGreen">
</Grid>
<TextBlock Text="{Binding DisplayString}" Foreground="Black" Height="20" FontWeight="Bold" Padding="2,2,0,0" />
<Button Click="Button_ListItem_Click" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Top">
<Button.ContextMenu>
<ContextMenu Tag="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
<MenuItem Header="Show" Click="mn_call_Click" Name="mn_call" DataContext="{Binding Tag.Number, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}" />
</ContextMenu>
</Button.ContextMenu> ...
</Button>
<StackPanel Grid.Row="1">
<TextBlock Text="{Binding State}" Height="20" Padding="2,2,0,0"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Foo" Height="20" FontWeight="Bold" Padding="2,2,2,0" HorizontalAlignment="Left" Foreground="Blue" />
<TextBlock Text="Bar" Height="20" Padding="0,2,0,0" HorizontalAlignment="Left" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Collections.Generic;
namespace WpfApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<PhoneClient> clients = new List<PhoneClient>();
clients.Add(new PhoneClient() { Name = "Kumar", Number = "0101010", Extension = "555", State = "New York" });
clients.Add(new PhoneClient() { Name = "Shanaya", Number = "1010101", Extension = "555", State = "New Jersey" });
clients.Add(new PhoneClient() { Name = "Billy Bob", Number = "6543210", Extension = "555", State = "Single" });
lv_clients.ItemsSource = clients;
}
public class PhoneClient
{
public String Name { get; set; }
public String Number { get; set; }
public String Extension { get; set; }
public String State { get; set; }
public String DisplayString
{
get
{
return String.IsNullOrEmpty(Name) ? Number : String.Format("{0} ({1})", Name, Extension);
}
}
}
private void mn_call_Click(object sender, RoutedEventArgs e)
{
MenuItem currentMenuItem = (MenuItem)sender;
string number = (string)currentMenuItem.DataContext;
MessageBox.Show("Number " + number);
}
private void Button_ListItem_Click(object sender, RoutedEventArgs e)
{
Button currentButton = (Button)sender;
PhoneClient data = (PhoneClient)currentButton.DataContext;
MessageBox.Show(data.Name + " tapped");
}
}
}
In my application I have a window which contain a ListBox, and controls that should show different properties of its currently selected item. Those controls are:
TextBox that should show 'Name' property.
TextBox that should show 'DataFile` property.
DataGrid that should show 'TItems property, which is an ObservableCollection.
I tried to bind SelectedItem to an object, and then bind different properties of that object to the controls mentioned above, with no success.
The window:
My View:
<Window
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:ReportMaker"
xmlns:ViewModel="clr-namespace:ReportMaker.ViewModel" x:Class="ReportMaker.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<ViewModel:MainViewModel/>
</Window.DataContext>
<Grid>
<Button x:Name="button" Content="Create" HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="75"/>
<ComboBox x:Name="comboBox" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="120"/>
<ListBox x:Name="listBox" HorizontalAlignment="Left" Margin="10,10,0,36.667" Width="119" ItemsSource="{Binding ReportItems}" >
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel HorizontalAlignment="Left" Height="274" Margin="134,10,0,0" VerticalAlignment="Top" Width="375" DataContext="{Binding SelectedReportItem}">
<StackPanel.Resources>
<Style x:Key="ControlBaseStyle" TargetType="{x:Type Control}">
<Setter Property="Margin" Value="0, 10, 0, 0" />
</Style>
</StackPanel.Resources>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name:"/>
<TextBox Width="150" Text="{Binding Name}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Data File:"/>
<TextBox Width="150" Text="{Binding ID}"/>
</StackPanel>
<DataGrid Height="190" VerticalAlignment="Bottom" ItemsSource="{Binding TItems}"/>
</StackPanel>
<Button x:Name="button_Copy" Content="Save" HorizontalAlignment="Right" Margin="0,0,92,10" VerticalAlignment="Bottom" Width="75"/>
</Grid>
</Window>
My ViewModel:
public class MainViewModel
{
public ObservableCollection<ReportItem> ReportItems { get; set; }
public object SelectedReportItem { get; set; }
public MainViewModel()
{
ReportItems = new ObservableCollection<ReportItem>();
ReportItems.Add(Example);
}
public ReportItem Example = new TextReportItem() { Name = "John", DataFile = "try.txt"};
}
ReportItem:
public class ReportItem
{
public int Id { get; set; }
public string Name { get; set; }
public string DataFile { get; set; }
}
TextReportItem:
public class TextReportItem : ReportItem
{
public ObservableCollection<TextParcel> TItems { get; set; }
}
public class TextParcel
{
char Delimiter { get; set; }
string LineExp { get; set; }
string Result { get; set; }
string IgnoreLine { get; set; }
int DesiredResultIndexInLine { get; set; }
}
EDIT: as I use MVVM, I prefer to use only XAML in the View, with no code behind.
EDIT 2:
Thanks to S.Akbari I succeeded to view the desired properties in the TextBox controls, with the following code:
<StackPanel Orientation="Horizontal">
<TextBlock Text="Name:"/>
<TextBox Width="150" Text="{Binding ElementName=listBox, Path=SelectedItem.Name}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Data File:"/>
<TextBox Width="150" Text="{Binding ElementName=listBox, Path=SelectedItem.DataFile}"/>
</StackPanel>
But when the same logic is applied to my DataGrid, it fails for some reason:
<DataGrid Height="190" VerticalAlignment="Bottom" ItemsSource="{Binding ElementName=listBox, Path=SelectedItem.TItmes}" />
I also tried:
<DataGrid Height="190" VerticalAlignment="Bottom" DataContext="{Binding ElementName=listBox, Path=SelectedItem}" ItemsSource="{Binding TItems}"/>
And also:
<DataGrid Height="190" VerticalAlignment="Bottom" DataContext="{Binding ElementName=listBox, Path=SelectedItem}">
<DataTemplate>
<TextBlock Text="{Binding TItems}" />
</DataTemplate>
</DataGrid>
if you use MVVM your view model should raise property changed events
You should implement INotifyPropertyChanged
and change the selected item to be a full property
see :How to: Implement Property Change Notification
My class IFrame can contain other IFrames:
public interface IFrame
{
int Id { get; }
string Summary { get; }
BindableCollection<IFrame> SubFrames { get; set; }
}
To present an IFrame, I have a custom UserControl:
<UserControl x:Class="Views.FrameView"
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:Views="clr-namespace:Views"
mc:Ignorable="d"
x:Name="FrameXName">
<StackPanel Orientation="Horizontal">
<Label Content="{Binding ElementName=FrameXName, Path=Id}" Width="50"/>
</StackPanel>
</UserControl>
With codebehind:
public partial class FrameView : UserControl
{
public FrameView()
{
InitializeComponent();
}
public static DependencyProperty IdProperty = DependencyProperty.Register(
"Id", typeof(int), typeof(FrameView));
public int Id
{
get { return (int) GetValue(IdProperty); }
set { SetValue(IdProperty, value); }
}
}
And thus I can display a Frame in a FooView.xaml using:
<Views:FrameView x:Name="Frame1" Width="50" Height="50"/> IF I define the following in FooViewModel.cs:
public IFrame Frame1 { get { return Frames.ElementAt(1); } }
My Goal:
I want to have a FrameView displayed for every IFrame in a collection, for example:
<ItemsControl ItemsSource="{Binding Frames}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Views:FrameView x:Name="{Binding}" Width="50" Height="50"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Where public BindableCollection<IFrame> Frames is defined.
Unfortunately, this does not work, the compiler says MarkupExtensions are not allowed for Uid or Name property values, so '{Binding}' is not valid.
How can I achieve my goal? Many thanks in advance.
In your datatemplate you can replace
<Views:FrameView x:Name="{Binding}" Width="50" Height="50" />
with
<Views:FrameView Id="{Binding Path=Id}" Width="50" Height="50" />
should work fine
Here's the code for my window:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="leartWPF.ControlTestWindow"
x:Name="Window"
Title="ControlTestWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<TextBlock Height="26" Margin="45,26,241,0" TextWrapping="Wrap" Text="Please, enter an ariphmetical expression to calculate:" VerticalAlignment="Top"/>
<TextBox Margin="48,72,63,201" TextWrapping="Wrap" Text="{Binding Input, ElementName=Window, FallbackValue=1+1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}" TextChanged="TextBox_TextChanged" >
</TextBox>
<!--<TextBlock Margin="282,208,266,167" TextWrapping="Wrap" Text="=" FontSize="64"/>-->
<TextBlock Height="90" Margin="83,0,77,60" TextWrapping="Wrap" VerticalAlignment="Bottom" FontSize="48" Text="{Binding Result, ElementName=Window, Mode=TwoWay}"/>
<Button Content="=" Height="27" Margin="233,0,263,166" VerticalAlignment="Bottom" FontSize="16"/>
</Grid>
</Window>
and the class:
public partial class ControlTestWindow : Window
{
private string _input;
public double Result { get; set; }
private static VsaEngine _engine = VsaEngine.CreateEngine();
public string Input
{
get { return _input; }
set
{
Result = double.Parse(Eval.JScriptEvaluate(value, _engine).ToString());
_input = value;
}
}
public ControlTestWindow()
{
this.InitializeComponent();
// Insert code required on object creation below this point.
}
private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
}
}
The Input gets updated, and Result value changes, but it is never displayed on the appropriate TextBlock.
What should I change for this to work?
The TextBlock doesn't get notified of the change to the Result property. You have two options:
Implement the property as a DependencyProperty. Visual studio has a code snippet for it. Type propdp and you'll see it pop up in intellisense.
Implement INotifyPropertyChanged on your Window class and use it in your property.