Converting UI from Windows Forms to WPF databinding - wpf

I currently have an application with a user interface in Windows Forms. The code behind this user interface communicates with a service.
For example, I have the following code:
public partial class MainWindow : Window
{
private KeyLessAccessLogic ServiceLogic;
public MainWindow()
{
InitializeComponent();
ServiceLogic = new KeyLessAccessLogic();
//LoadValues();
}
public KeyLessAccessLogic MyServiceLogic
{
get { return ServiceLogic; }
set
{
ServiceLogic = value;
// RaisePropertyChanged("MyServiceLogic");
}
}
private void BindDataSource()
{
cmb_user_name.DataSource = null;
cmb_user_name.Sorted = false;
cmb_user_name.DataSource = ServiceLogic.Users;
cmb_user_name.DisplayMember = "name";
}
And my XAML:
<ComboBox Height="23" HorizontalAlignment="Left" Margin="6,71,0,0"
Name="cmb_user_update" VerticalAlignment="Top" Width="120"
ItemsSource="{Binding Path=MyServiceLogic.Users}" DisplayMemberPath="name" />
Now I recreated the UI in WPF, and I'm a bit lost on the new format. I do believe that example I gave here is one of the examples of the difference between WPF and Windows Forms.
How can I let my application know what the datasource should be of the Dropdown-box cmb_user_name? ServiceLogic is the central block of my service, accessing for example the database.
As a second thing, I have a listbox to show me some devices. I tried to approach the datasource differently to show what else I have tried:
<ListBox Height="100" HorizontalAlignment="Left" Margin="6,44,0,0"
Name="listBox_detected" VerticalAlignment="Top" Width="120"
ItemsSource="{Binding Path=ServiceLogic.TheDevicesList}" DisplayMemberPath="name" />

Use XAML for that:
<ComboBox ItemsSource="{Binding MyServiceLogic.Users}"
SelectedItem="{Binding User}"
DisplayMemberPath="name" />
Create a property ServiceLogic in your ViewModel to hold a ServiceLogic object:
private ServiceLogic myServiceLogic;
public ServiceLogic MyServiceLogic
{
get { return myServiceLogic; }
set
{
myServiceLogic = value;
RaisePropertyChanged("MyServiceLogic");
}
}
I assume Users is ObservableCollection. Or you can create a property which holds Users collection directly.

Related

Caliburn.Micro - Passing combobox items to a button

I'm trying to pass items from my Combobox (which is binded to my Model object's lists) to my button. My problem is that I'm new to Caliburn.Micro + WPF and not quite sure how to subscribe/pass the desired values to my button (like sending strings of a PropetyName to a Button(string propetyName)).
ViewModel code:
class ShellViewModel : Screen
{
private DataModel _fileInFolder;
private BindableCollection<DataModel> _data;
public ShellViewModel()
{
// .GetData() preforms the objects' initialization
DataModel dataOutput = new DataModel();
Data = new BindableCollection<DataModel>(dataOutput.GetData());
}
public BindableCollection<DataModel> Data
{
get
{
return _data;
}
set
{
_data = value;
NotifyOfPropertyChange(() => Data);
}
}
public DataModel FileInFolder
{
get { return _fileInFolder; }
set
{
_fileInFolder = value;
NotifyOfPropertyChange(() => FileInFolder);
}
}
//This is where the items will be passed to.
public void OpenFile()
{
}
}
XAML code:
<Grid>
<!-- Folders -->
<ComboBox ItemsSource="{Binding Data}" SelectedItem="{Binding FileInFolder}"
HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="250">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Folders}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!-- Files -->
<ComboBox x:Name="FileInFolder_Files"
HorizontalAlignment="Left" Margin="280,10,0,0" VerticalAlignment="Top" Width="250"/>
<!-- Open File -->
<Button x:Name="OpenFile"
Content="Open File" HorizontalAlignment="Left" Margin="560,10,0,0" VerticalAlignment="Top" Width="90">
</Button>
</Grid>
Sorry if my description is vague/missing more clarification, I'm a new user here!
FileInFolder is the selected item of the combo.
OpenFile is in the same class and can therefore reference FileInFolder.
public void OpenFile()
{
var whatever = FileInFolder.SomeProperty;
// etc
}
You probably want some null checking in there.

How to show the selected item of a WPF binding

C#:
public void SetCompetition(Window wT1)
{
//Add all the Copetition
wT1._competition = new List<Competition>();
wT1._competition.Add(new Competition { Logo = "3.png", Name = "test1", IsSelected = false });
wT1._competition.Add(new Competition { Logo = "3.png", Name = "test2", IsSelected = false });
wT1._competition.Add(new Competition { Logo = "3.png", Name = "test3", IsSelected = false });
wT1._competition.Add(new Competition { Logo = "3.png", Name = "test4", IsSelected = false });
wT1.cboSetupCompetition.ItemsSource = wT1._competition;
wT1.cboSetupCompetition.Items.Refresh();
}
Data Template:
<UserControl.Resources>
<System:Double x:Key="Double1">11</System:Double>
<DataTemplate x:Key="cmbCompetition">
<WrapPanel Height="30" >
<Label Content="{Binding Name}" ></Label>
</WrapPanel>
</DataTemplate>
</UserControl.Resources>
<ComboBox x:Name="cboSetupCompetition" ItemTemplate="{DynamicResource cmbCompetition}" HorizontalAlignment="Left" Margin="29,28,0,0" VerticalAlignment="Top" Width="173" RenderTransformOrigin="0.5,0.591" FontSize="12" Height="22" IsEditable="True" Background="#FFD8D8D8" SelectionChanged="UpdateCompetitionSelection"/>
I have a Combobox with a label and an image and when I select an item I would like to see the same format in the Combobox when it is closed. I am not getting any errors I am seeing the name of the application.Competition(this is my object Model) instead of the values of the image and label.
The SetCopetition is invoked when the application loads.
A TextBox is not able to display a Label and an Image or whatever elements that are in your DataTemplate in it.
Set the IsEditable property of the ComboBox to false and it should work as expected, i.e. your DataTemplate will be applied to the selected item when the ComboBox is closed:
<ComboBox x:Name="cboSetupCompetition" IsEditable="False" ItemTemplate="{DynamicResource cmbCompetition}" HorizontalAlignment="Left" Margin="29,28,0,0" VerticalAlignment="Top" Width="173" RenderTransformOrigin="0.5,0.591" FontSize="12" Height="22" Background="#FFD8D8D8" SelectionChanged="UpdateCompetitionSelection"/>
Your issue has nothing to do with MVVM...
the specific problem as Mn8 spotted is that IsEditable=true forces the combo to display a textbox as the selected item
However you are still thinking winforms not WPF, using code behind to link data into the view causes many problems and instability as quite often this breaks the binding connections which is what is suspected was your problem initially, using a proper MVVM approach will eliminate all these problems
the best overveiw of MVVM i know of is
https://msdn.microsoft.com/en-gb/library/hh848246.aspx
Model
this is your data layer, it handle storage and access to data, your model will handle access to files, databases, services, etc
a simple model would be
public class Model
{
public string Text { get; set; }
public Uri Uri { get; set; }
}
ViewModel
on top of your Model you have your View Model
this manages the interaction of your View with the model
for example here because it uses Prism's BindableBase the SetProperty method notifies the View of any changes to the data, the ObservableCollection automatically notifies of changes to the collection, it also uses Prism's DelegateCommand to allow method binding in the view
public class ViewModel:BindableBase
{
public ViewModel()
{
AddItem = new DelegateCommand(() => Collection.Add(new Model()
{
Text = NewText,
Uri = new Uri(NewUri)
}));
}
private string _NewText;
public string NewText
{
get { return _NewText; }
set { SetProperty(ref _NewText, value); }
}
private string _NewUri;
public string NewUri
{
get { return _NewUri; }
set { SetProperty(ref _NewUri, value); }
}
private Model _SelectedItem;
public Model SelectedItem
{
get { return _SelectedItem; }
set
{
if (SetProperty(ref _SelectedItem, value))
{
NewText = value?.Text;
NewUri = value?.Uri.ToString();
}
}
}
public ObservableCollection<Model> Collection { get; } = new ObservableCollection<Model>();
public DelegateCommand AddItem { get; set; }
}
View
the View ideally does nothing but displays and collects data, all formatting / Styling should be done here
firstly you need to define the data source, the usual way is via the data context as this auto inherits down the visual tree, in the example because i set the window's datacontext, i have also set it for everything in the window the only exception is the dataTempplate as this is set to the current item in the collection
i then bind properties to the datasource
Note the code behind file is only the default constructor no other code at all
<Window
x:Class="WpfApplication1.MainWindow"
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:local="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<StackPanel>
<GroupBox Header="Text">
<TextBox Text="{Binding NewText}"/>
</GroupBox>
<GroupBox Header="URI">
<TextBox Text="{Binding NewUri}"/>
</GroupBox>
<Button Content="Add" Command="{Binding AddItem}"/>
<ComboBox ItemsSource="{Binding Collection}" SelectedItem="{Binding SelectedItem}">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Uri}" />
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</StackPanel>
</Window>

WPF Combobox Entity Framework Binding (MVVM)

I am using the EntityFramework library in my WPF Application and I am having the following issue:
I am using the MVVM pattern (to the best of my knowledge) and I am trying to make a Combobox Lookup with EF values.
I have a Company class which contains many Offices (a class as well)
This has been modelled through the EntityFramework and all the links are correct (Office has a CompanyName which is a foreign key).
Here is the OfficeView class:
public partial class AddOffice : Window
{
private DBHelper.ResourceManagementContext context = new DBHelper.ResourceManagementContext();
public AddOffice()
{
InitializeComponent();
context.Companies.Load();
this.DataContext = context.Companies.Local;
//this.DataContext = new AddOfficeViewModel();
}
public void CloseCommandHandler(object sender, ExecutedRoutedEventArgs e)
{
this.Close();
}
}
Here is the corresponding XAML:
<Label Grid.Row="4" Grid.Column="0" Margin="10,10">Company:</Label>
<ComboBox Grid.Row="4" Grid.Column="1" Margin="10,10"
ItemsSource="{Binding}"
DisplayMemberPath="CompanyName"
SelectedValuePath="CompanyName"
SelectedValue="{Binding Path=CompanyName}"/>
I know the MVVM pattern usually passes a ViewModel to the View so how would I accomplish binding the EntityFramework Company list to the ComboBox using the OfficeViewModel?
I understand the ComboBox properties. I know the selected value would be the CompanyName from the Office object and the SeletecValuePath would be the CompanyName from the Company object.
In View Model:
class OfficeViewModel
{
private string _CompanyName;
public string CompanyName
{
get
{
return _CompanyName;
}
set
{
_CompanyName = value;
NotifyPropertyChanged("CompanyName");
}
}
private List<Location> _CompanyList;
public List<Location> CompanyList
{
get
{
return _CompanyList;
}
set
{
_CompanyList = value;
NotifyPropertyChanged("CompanyList");
}
}
public List<Company> GetCompanyList()
{
return (from comp in Entity.Companies select comp).ToList();
}
}
In Xaml:
Add the namespace in xaml as follows:
xmlns:ViewModels="clr-namespace:WpfMvvmApplication.ViewModels"
Add the following in window.resources:
<Window.Resources>
<ViewModels:OfficeViewModel x:Key="OfficeController"/>
</Window.Resources>
Bind the View Model to combobox:
<Label Grid.Row="4" Grid.Column="0" Margin="10,10">Company:</Label>
<ComboBox Grid.Row="4" Grid.Column="1" Margin="10,10"
ItemsSource="{Binding CompanyList, Source={StaticResource OfficeController}}"
DisplayMemberPath="CompanyName"
SelectedValuePath="CompanyName"
SelectedValue="{Binding Path=CompanyName}"/>
Hope this helps you.

Get name of selected listbox item (WPF C#)?

all. I have an app that scans a picture folder and displays the images along with their names in a listbox. Each image and image name (displayed in a textblock next to the image) is stored in a horizontal stackpanel inside the listbox.
I've been trying all afternoon to find a way of displaying the image name in a textbox when the user selects it in the listbox. Sounds very simple, and I'm sure it is, but I can't seem to get it to work.
Can anyone point me in the right direction as to the best way of doing this? Thanks.
Here is my xaml if it helps:
<Grid>
<ListBox ItemsSource="{Binding AllImages}" Margin="0,0,262,0" Name="listBox1" MouseLeftButtonDown="listBox1_MouseLeftButtonDown">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Width="50" Height="50" Margin="6"/>
<TextBlock Text="{Binding Name}" Margin="6" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox Height="23" HorizontalAlignment="Left" Margin="265,148,0,0" Name="textBox1" VerticalAlignment="Top" Width="198" />
</Grid>
And my code behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
public class MyImage
{
private ImageSource _image;
private string _name;
public MyImage(ImageSource image, string name)
{
_image = image;
_name = name;
}
public override string ToString()
{
return _name;
}
public ImageSource Image
{
get { return _image; }
}
public string Name
{
get { return _name; }
}
}
public List<MyImage> AllImages
{
get
{
List<MyImage> result = new List<MyImage>();
string filePath = #"D:\Projects\Visual Studio 2010\WpfApplication5\WpfApplication5\bin\Debug\ImageFolder";
string[] files = Directory.GetFiles(filePath);
foreach (string filename in files)
{
try
{
result.Add(
new MyImage(
new BitmapImage(
new Uri(filename)),
System.IO.Path.GetFileNameWithoutExtension(filename)));
}
catch { }
}
return result;
}
}
}
Take a look at this question.
How do I bind a Listview SelectedItem to a Textbox using the TwoWay mode?
In your case use
<TextBox Height="23"
HorizontalAlignment="Left"
Margin="265,148,0,0"
Name="textBox1"
VerticalAlignment="Top" Width="198"
Text="{Binding SelectedItem.Name, ElementName=listBox1}"/>
To retrieve the selected image from code, you have at least 3 options (I assume your images are represented by a class ImageItem)
Set IsSynchronizedWithCurrentItem to true on your ListBox, and use the following code to retrieve the selected item:
ICollectionView view = CollectionViewSource(AllImages);
ImageItem selectedImage = (ImageItem)view.CurrentItem;
Bind the SelectedItem of the ListBox to a property in your DataContext:
<ListBox .... SelectedItem="{Binding SelectedImage}">
Access the SelectedItem property directly from code-behind:
ImageItem selectedImage = (ImageItem)listBox1.SelectedItem;
Of course, if you just want to show the name in a TextBlock, you can use Russell Troywest's solution

WPF ItemsSource Binding

I have a Datagrid control in my WPF application and I am trying to bind that control to an ObservableCollection property in my Main Window's class. The property I'm trying to bind to is defined as:
private ObservableCollection<RequestResult> m_SentRequests = new ObservableCollection<RequestResult>();
public ObservableCollection<RequestResult> SentRequests { get { return m_SentRequests; } }
My datagrid is in a group by which has the datacontext set to the MainWindow:
<GroupBox Header="Results" Height="275" HorizontalAlignment="Stretch" Margin="0,305,0,0" Name="grpResults" VerticalAlignment="Top" Width="712" DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=my:MainWindow, AncestorLevel=1}}">
<Grid>
<DataGrid AutoGenerateColumns="False" Height="246" HorizontalAlignment="Stretch" Margin="6,6,6,0" Name="dgResults" VerticalAlignment="Top" ItemsSource="{Binding Path=SentRequests}" DataContext="{Binding}" IsSynchronizedWithCurrentItem="True" />
</Grid>
</GroupBox>
The problem that I'm having is that in the properties window, after I select SentRequests as my ItemsSource, I still can't select the "Edit Property-Bound Columns" option. I get a "You must set ItemsSource before you can perform this action" dialog. I get the same error when selecting "Generate Columns" and "Remove Columns". It's as if I haven't set anything in the ItemsSource property for my Dialog.
I can set AutoGenerateColumns to true though and I see my data get bound though (however, not with the columns I want to show).
I'm very new to WPF and I'm just writing this as a quick test app for testing a windows service.
Any one know what I'm doing wrong here?
I don't believe you need the Path parameter within your itemSource. You should be able to just set the binding as ItemsSource={Binding SentRequests}
You can also bind to the grid item source in code for example if I create a dummy collection:
public class People
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Age { get; set; }
public string address { get; set; }
public string zip { get; set; }
}
and then populate it
this.AllPeople = new ObservableCollection<People>();
private void FillData()
{
People p1 = new People();
p1.FirstName = "John";
p1.LastName = "Doe";
p1.Age = "24";
p1.address = "123 Main Street";
p1.zip = "11111";
People p2 = new People();
p2.FirstName = "Jane";
p2.LastName = "Smith";
p2.Age = "36";
p2.address = "456 Water Street";
p2.zip = "22222";
People p3 = new People();
p3.FirstName = "Larry";
p3.LastName = "Williams";
p3.Age = "24";
p3.address = "785 Water Street";
p3.zip = "33333";
this.AllPeople.Add(p1);
this.AllPeople.Add(p2);
this.AllPeople.Add(p3);
}
I could then set the items source in the mainpage contsructor or method as:
this.gridviewname.ItemsSource = "AllPeople";
This is probably a result of some of the trickery that the designer does to render without constantly compiling (like skipping code-behind constructors). Try moving your collection to a separate class and use an instance of that as your DataContext (like an MVVM ViewModel). The other class should be able to initialize normally and provide the bound property to the designer.
Have you tryed without the DataContext tags? Both in GroupBox and DataGrid.
EDIT
something like this:
<GroupBox Header="Results" Height="275" HorizontalAlignment="Stretch" >
<Grid>
<DataGrid AutoGenerateColumns="False" Height="246" HorizontalAlignment="Stretch" Name="dgResults" VerticalAlignment="Top" ItemsSource="{Binding Path=SentRequests}" IsSynchronizedWithCurrentItem="True" />
</Grid>
</GroupBox>

Resources