I want to create an application where the user can enter shortcuts to files. I know how to create buttons in code at compile time but I have no idea how to create dynamic buttons where the name and the click event are going to be dynamic.
How hard would it be to create something like the image below? Is that even possible in C#/WPF/XAML?
What would be the logic?
FYI - I don't need help with saving the buttons objects, for this I will be using JSON.
You should create an ItemsControl to show what you want, this could be an approach:
<ItemsControl
ItemsSource="{Binding YourListOfLinkObject}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding WhateverYouWantToShow}"
Command="{Binding YourCommand} "
CommandParameter="{Binding YourFileName}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You should create a new (if it's not already created) class with the name of the file, the content you want to show in the button and your command. And when initializing the view, create a list of "Link" object.
The command will be the same for all of them, just declare it in a generic way to open the file you put in the CommandParameter
Now that I know you are using MVVM I will try to expand my answer focus on that.
You need a class that I will call FileLink. FileLink will have, at least, 3 properties:
public string WhateverYouWantToShow - This will be the content of your button
public ICommand YourCommand - This will have a DelegateCommand<string> that will be the one who "does" things. This command will be the same for every item you create. You just need one because you will use the parameter to execute/open one file or another.
public string YourFileName - This will be the string you need to execute your command method. I guess it will be a path or a file name.
Now that we have this class created, when initializing the third view, the one with the buttons, you will have an ObservableCollectionproperty, what I called YourListOfLinkObject, of FileLinkobjects. There you will have to add as many FileLink objects as you got from the database and they will be displayed.
If you need to change the way they are shown you just need to modify the DataTemplate.
If there's something I failed to explain again or you want me to go further just let me know :)
It is possible and simple. You add controls to your container and add container to main form. Click event is simply defined in code (which actually you know at dev time - probably you should instead use user controls).
Below is some partial code, doing a similar thing in a real world Silverlight application from years ago to give the idea:
...
sp.Children.Add(p);
foreach (var slot in group)
{
var color = colors[(int)slot.State];
var name = String.Format("W{0}", slot.When.ToString("yyyyMMddHHmm"));
Rectangle rect = new Rectangle
{
Name = name,
Width = rectWidth,
Height = rectWidth,
Margin = new Thickness(rectMargin),
Stroke = new SolidColorBrush(slot.State == Availability.Booked ? Colors.White : Colors.Black),
StrokeThickness = 1,
Fill = new SolidColorBrush(color),
RadiusX = 2,
RadiusY = 2,
Cursor = (slot.State == Availability.Booked ? Cursors.Arrow : Cursors.Hand)
};
if (slot.State != Availability.Booked)
{
rect.Effect = new DropShadowEffect(); //myDropShadowEffect,
}
if (slot.State != Availability.Booked)
{
rect.MouseLeftButtonDown += new MouseButtonEventHandler(rect_MouseLeftButtonDown);
ToolTipService.SetToolTip(rect, slot.When.ToString("MMM dd,yyyy dddd hh:mm tt"));
}
sp.Children.Add(rect);
}
b.Child = sp;
contentStackPanel.Children.Add(b);
}
Related
This question already has answers here:
Binding dynamically created control in code behind
(1 answer)
Dynamically Create Controls in MVVM
(1 answer)
Creating controls dynamically using xaml
(1 answer)
Closed 2 years ago.
I'm working with a MVVM appliaction in which I generate controls dinamically using a list with values taken from a database. The problem is that I don't know how to pass the values of the controls to the view model when the controls are generated dinamically.
I have created a class with the values that I want to pass to the view model like this:
class Bindeo {
int id;
string especifique;
bool padece;
public Bindeo(int id, string especifique, bool padece) {
id = this.id;
especifique = this.especifique;
padece = this.padece;
}
}
And i'm generating the values dinamically like this:
for (int x = 0; x < Math.Floor(cantidadElementosPorColumna) + residuo; x++) {
CAT_GINECOBSTETRICOS enfermedad = vm.EnfermedadesGinecobstetricas[x];
Grid grid = new Grid();
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
Label tituloEnfermedad = new Label {
Content = enfermedad.DESCRIPCION
};
Grid.SetColumn(tituloEnfermedad, 0);
grid.Children.Add(tituloEnfermedad);
Grid radios = new Grid();
radios.ColumnDefinitions.Add(new ColumnDefinition());
radios.ColumnDefinitions.Add(new ColumnDefinition());
RadioButton si = new RadioButton {
Content = "Si"
};
RadioButton no = new RadioButton {
Content = "No"
};
Grid.SetColumn(si, 0);
Grid.SetColumn(no, 1);
radios.Children.Add(si);
radios.Children.Add(no);
Grid.SetColumn(radios, 1);
grid.Children.Add(radios);
TextBox tb = new TextBox();
si.Command = vm.GenerarReporteCommand;
si.CommandParameter = new Bindeo((int) enfermedad.ID_CAT_GINECOBSTETRICOS, tb.Text, si.IsChecked.GetValueOrDefault());
EspecifiqueGinecobstetricos1.Children.Add(tb);
GinecobstetricosColumna1.Children.Add(grid);
}
What I'm doing here is that I want to bind to the si RadioButton a command in the view model, and send as parameter to the command the object Bindeo when a radio button is clicked. The values that I take for create the object Bindeo is the id of the object of the database that i'm referencing, the value of the textbox and the value of the siradio button, but when I click the radio button and the command is triggered, the object sended to the command is not taking the actulized values, instead is taken the values when the controls are created. How can I update the values to send them to the view model and not sending nulls?
What you're doing is not MVVM. In MVVM you never create controls directly, you instead assign data to properties and then write your XAML to respond to those changes. If at any point you need to call methods on GUI elements then you have a number of options e.g. behaviours.
In your specific case, you're trying to display a list of items, in which case you should start by using an ItemsControl. You then declare Data Templates in your XAML to specify how that data should be displayed, and you set the Panel Template to something other than the default StackPanel. Generally speaking, Grid isn't the best panel type to use for this, due to the need to also specify the row definitions, but there are certainly ways around that.
Here's a good tutorial to help get you started with all this, note the section titled "ItemsControl with data binding".
I have a form that has a dynamic amount of datagrids that are brought in programmatically each one on a new tabpage.
My problem is that I need to change the Header of each column. I have tried doing it through a method
DataGridForSupplier.Columns[0].Header = "123";
but that keeps crashing with an error:
Index was out of range. Must be non-negative and less than the size of the collection
Turns out the problem is that the grid wasn't finished loading. So after waiting for all tabpage to load and add data to all the grids , even then the code
DataGridForSupplier.Columns[0].Header = "123";
would still crash. If the tabs are left to load on their own with no header tampering then the datagrid shows fine.
I would just LOVE to do this in XAML problem is that seeing that I don't know how many grids will load at run time I tried doing this at the back. So I'm open to any solution at this point. I tried finding a solution that would incorporate something that would 'theme' all the datagrids. Luckily all the datagrids headers will repeat across all tabs. So header 1 on tabpage 1 - 10 will be the same. Header 2 on tabpage 1 - 10 will be the same
Something like
<DataGridTemplateColumn.Header>
<TextBlock Text="{Binding DataContext.HeaderNameText, RelativeSource=>> RelativeSource AncestorType={x:Type DataGrid}}}" />
</DataGridTemplateColumn.Header>
but this needs to repeat for every Grid. This seems to escape me at the moment.
Any help would be welcome.
A rather lengthy answer, but this solution does not require any additional libraries, 3rd party tools, etc. You can expand it as you want later such as for adding hooks to mouse-move/over/drag/drop/focus, etc. First the premise on subclassing which I found out early in my learning WPF. You can not subclass a xaml file, but can by a .cs code file. In this case, I subclassed the DataGrid to MyDataGrid. Next, I created an interface for a known control type to ensure contact of given functions/methods/properties. I have stripped this version down to cover just what you need to get.
The interface below is just to expose any class using this interface MUST HAVE A METHOD called MyDataGridItemsChanged and expects a parameter of MyDataGrid.. easy enough
public interface IMyDataGridSource
{
void MyDataGridItemsChanged(MyDataGrid mdg);
}
Now, declaring in-code a MyDataGrid derived from DataGrid. In this class, I am adding a private property of type IMyDataGridSource to grab at run-time after datagrids are built and bound.
public class MyDataGrid : DataGrid
{
// place-holder to keep if so needed to expand later
IMyDataGridSource boundToObject;
public MyDataGrid()
{
// Force this class to trigger itself after the control is completely loaded,
// bound to whatever control and is ready to go
Loaded += MyDataGrid_Loaded;
}
private void MyDataGrid_Loaded(object sender, RoutedEventArgs e)
{
// when the datacontext binding is assigned or updated, see if it is based on
// the IMyDataGridSource object. If so, try to type-cast it and save into the private property
// in case you want to add other hooks to it directly, such as mouseClick, grid row changed, etc...
boundToObject = DataContext as IMyDataGridSource;
}
// OVERRIDE the DataGrid base class when items changed and the ItemsSource
// list/binding has been updated with a new set of records
protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e)
{
// do whatever default behavior
base.OnItemsChanged(e);
// if the list is NOT bound to the data context of the IMyDataGridSource, get out
if (boundToObject == null)
return;
// the bound data context IS of expected type... call method to rebuild column headers
// since the "boundToObject" is known to be of IMyDataGridSource,
// we KNOW it has the method... Call it and pass this (MyDataGrid) to it
boundToObject.MyDataGridItemsChanged(this);
}
}
Next into your form where you put the data grid. You will need to add an "xmlns" reference to your project so you can add a "MyDataGrid" instead of just "DataGrid". In my case, my application is called "StackHelp" as this is where I do a variety of tests from other answers offered. The "xmlns:myApp" is just making an ALIAS "myApp" to the designer to it has access to the classes within my application. Then, I can add
<Window x:Class="StackHelp.MyMainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myApp="clr-namespace:StackHelp"
Title="Main Window" Height="700" Width="900">
<StackPanel>
<!-- adding button to the main window to show forced updated list only -->
<Button Content="Refresh Data" Width="100"
HorizontalAlignment="Left" Click="Button_Click" />
<myApp:MyDataGrid
ItemsSource="{Binding ItemsCollection, NotifyOnSourceUpdated=True}"
AutoGenerateColumns="True" />
</StackPanel>
</Window>
Now, into the MyMainWindow.cs code-behind
namespace StackHelp
{
public partial class MyMainWindow : Window
{
// you would have your own view model that all bindings really go to
MyViewModel VM;
public MyMainWindow()
{
// Create instance of the view model and set the window binding
// to this public object's DataContext
VM = new MyViewModel();
DataContext = VM;
// Now, draw the window and controls
InitializeComponent();
}
// for the form button, just to force a refresh of the data.
// you would obviously have your own method of querying data and refreshing.
// I am not obviously doing that, but you have your own way to do it.
private void Button_Click(object sender, RoutedEventArgs e)
{
// call my viewmodel object to refresh the data from whatever
// data origin .. sql, text, import, whatever
VM.Button_Refresh();
}
}
}
Finally to my sample ViewModel which incorporates the IMyDataGridSource
public class MyViewModel : IMyDataGridSource, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void RaisePropertyChanged(string propertyName)
{ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); }
public ObservableCollection<OneItem> ItemsCollection { get; set; }
= new ObservableCollection<OneItem>();
public void Button_Refresh()
{
ItemsCollection = new ObservableCollection<OneItem>
{
new OneItem{ DayName = "Sunday", DayOfWeek = 0},
new OneItem{ DayName = "Monday", DayOfWeek = 1},
new OneItem{ DayName = "Tuesday", DayOfWeek = 2},
new OneItem{ DayName = "Wednesday", DayOfWeek = 3},
new OneItem{ DayName = "Thursday", DayOfWeek = 4},
new OneItem{ DayName = "Friday", DayOfWeek = 5 },
new OneItem{ DayName = "Saturday", DayOfWeek = 6 }
};
RaisePropertyChanged("ItemsCollection");
}
// THIS is the magic hook exposed that will allow you to rebuild your
// grid column headers
public void MyDataGridItemsChanged(MyDataGrid mdg)
{
// if null or no column count, get out.
// column count will get set to zero if no previously set grid
// OR when the items grid is cleared out. don't crash if no columns
if (mdg == null)
return;
mdg.Columns[0].Header = "123";
}
}
Now, taking this a step further. I don't know how you manage your view models and you may have multiple grids in your forms and such. You could create the above MyViewModel class as a smaller subset such as MyDataGridManager class. So each datagrid is bound to its own MyDataGridManager instance. It has its own querying / populating list for the grid, handling its own rebuild column headers, mouse clicks (if you wanted to expand), record change selected, etc.
Hope this helps you some. Again, this does not require any other 3rd party libraries and you can extend as you need. I have personally done this and more to the data grid and several other controls for certain specific pattern handling.
I spent some time now trying to work this out but I am still stuck on it. I have a WPF application with a MVVM pattern. In my ViewModel I have three cases where:
X needs Y and Y is available
X needs Y and Y is not available
X doesn't need Y
I am trying to set an image icon on my view based on these conditions (Like a Check Mark, exclamation Mark... whatever).
In ViewModel:
I created my properties. On any GUI change, I set the variables based on the above cases similar to the following:
void MyBigFunctionToSetAllProperties()
{
// other cases
// ..
if (NeedsY && YExists)
{
// properties
StatusIconPath = "#\"/Resources/SessionView/X-With-Green-Check-White.png\"";
ResultIconPath = "#\"/Resources/SessionView/Y-White.png\"";
}
}
In View.Cs: I did literally nothing.
In View.xaml: I bind like this:
<StackPanel>
<Image Source="{Binding StatusIconPath} />
</StackPanel>
I still can't see why it is not working. What is that thing that I am missing? Please and thanks.
It did not work to bind the properties directly with the Xaml as recommended. I tried it this way:
VM: sample property:
public BitmapImage VerificationStatusIcon{ get { return new BitmapImage(new Uri(#VerificationStatusIconPath, UriKind.Relative));}}
View Xaml:
<Image Name="verificationStatusImage" Source="{Binding VerificationStatusIcon}" Margin="5,0" Width="40" Height="40"/>
You have a whole bunch of unnecessary characters in your icon paths:
StatusIconPath = "#\"/Resources/SessionView/X-With-Green-Check-White.png\"";
ResultIconPath = "#\"/Resources/SessionView/Y-White.png\"";
Change them to this:
StatusIconPath = "Resources/SessionView/X-With-Green-Check-White.png";
ResultIconPath = "Resources/SessionView/Y-White.png";
. But no images originally to view and no changes..
Verify that the path to the image is correct. Maybe hard code an image to test the control against it.
One other scenario is that the resources are not being copied over for run-time acquisition. Make sure they are actually available during runtime.
can't see why it is not working
Is the main view's DataContext set to the live VM's instance?
What is that thing that I am missing?
If you are sure that the view's datacontext contains the live VM, then make sure that the property StatusIconPath on the VM reports a property change event.
That is so that the XAML control which is bound to it knows that it changed and correspondingly one needs to make sure that the ViewModel which holds StatusIconPath adheres to INotifyPropertyChanged which will facilitate such an operation in general:
private string _StatusIconPath;
public string StatusIconPath
{
get { return _StatusIconPath; }
set
{
_StatusIconPath = value;
PropertyChanged("StatusIconPath");
}
}
I provide more robust example on my blog entitled:
Xaml: ViewModel Main Page Instantiation and Loading Strategy for Easier Binding
It turned out that I have an extra unneeded characters in my ImagePaths as Kyle stated. And then, I needed to set my Image.Source from within my View.cs. At least, this is how it worked for me:
ViewModel Something like this:
if (Whatever)
{
StatusIconPath = "/Resources/SessionView/X-With-Green-Check-White.png";
ResultIconPath = "/Resources/SessionView/Y-White.png";
}
Then in View.cs and on SelectedItemChanged:
private void Grid_SelectedItemChanged(object sender, DevExpress.Xpf.Grid.SelectedItemChangedEventArgs e)
{
string tempStatus = ((SessionViewModel) DataContext).StatusIconPath;
string tempResult = ((SessionViewModel) DataContext).ResultIconPath;
StatusImage.Source = new BitmapImage(new Uri(#tempStatus, UriKind.Relative));
ResultImage.Source = new BitmapImage(new Uri(#tempResult, UriKind.Relative));
}
and in Xaml: just a fallback value(any original/default image we want). Ex:
<Image Name="ResultImage" Source="/EZ3D;component/Resources/SessionView/Retake-White.png"/>
I'm currently developing a WPF C# Application that contains some textbox validations. If field is valid it must show a ok validation image if not valid it must show a wrong validation image, like an image below.
My Problem is how to set visibility = visibility.Hidden for all images if I click on cancelar button or another button. I know set img1.visibility = visibility.Hidden;, img2.visibility = visibility.Hidden;, img3.visibility = visibility.Hidden;... Works but i need to create a function to do it. I believe that I create a List of Images and pass this List of parameter to a function works fine and I can use this function for other validations. So how can I do it?
Please check this article : Data Binding
If you implement data binding then you have just to bind properties:
<Image Source="..." Visibility="{Binding Img1Visibility}"/>
Implement ViewModel class via INotifyPropertyChanged
And then simply work with your Properties in code.
UPD
If you want to simply create function to work with your images then move your img1.visibility = visibility.Hidden;, img2.visibility = visibility.Hidden;, img3.visibility = visibility.Hidden; in separate function inside your MainWindow.xaml.cs file, you don't have to pass it as arguments as you work in one MainWindow class.
So simply:
private void Fun()
{
img1.visibility = visibility.Hidden;
img2.visibility = visibility.Hidden;
img3.visibility = visibility.Hidden;
}
And request your Fun() method from ClickButton handler.
Create an array of the image controls and iterate over it.
List<Image> _images = new List<Image>
{
img1,
img2,
...
};
void Cancelar()
{
foreach (var image in _images)
{
image.Visibility = Visibility.Hidden;
}
}
But still, the code is awful. Witness me SO.
I have an image name as a string. The real imagename on the form is called "image". So i get something like this:
image.Visibility = Visibility.Hidden;
string imageName = "image";
// need something here to make it usable...
changedImageName.Visibility = Visibility.Visible;
Now, a string can not be used in combination with the Visibility property.
I cant really find what i must make the string to, to make it usable for the visibility property.
If i see this page: http://msdn.microsoft.com/en-us/library/system.windows.visibility.aspx
Do I understand correct that I make it a "enum" ? And if yes, how do I get a string to that property?
EDIT 1
I see I have not been explaining it proper enough.
I forgot to mention I am using a WPF form.
on this form, I have put an image.
In the initialize part, the image get set to hidden.
so for example the imagename I named "Image"
so I use image.Visibility = Visibility.Hidden;
later on in my code, I want to make the image visible again, depending on what the user does.
so, instead if just using the name to get the image visible again, I want to use a string.
this string is looking exactly as the name of the image.
but i cant use the string in combination with the Visibility function.
but i cant find anywhere what i must make this string to, to be able to use that visibility option on it.
hope i explained a bit better now :).
Later on, i will have multiple images on the WPF window.
So the key is that i will use the string, that is corresponding with the name of the image.
Depending on what the user has input into the string, some image will or will not show.
EDIT 2
If you have:
String theName = ImageName.name
you can get the name of the image into a string, so you can do stuff with it.
i am looking for a way to do the exact opposite of this. So i want to go from a string, to that name, so after that i can use this to control the image again.
Edit 3
some example:
private void theButton_Click(object sender, RoutedEventArgs e)
{
//get the Name property of the button
Button b = sender as Button;
string s = b.Name;
MessageBox.Show("this is the name of the clicked button: " + s);
//the name of the image to unhide, is the exact same as the button, only with IM in front so:
string IM = "IM";
IM += s;
MessageBox.Show("this string, is now indentical to the name of the image i want to unhide, so this string now looks like: " + IM );
// now, this wont work, because i cant use a string for this, although the string value looks exactly like the image .name property
// so string IM = IMtheButton
// the image to unhide is named: IMtheButton.name
IM.Visibility = Visibility.Visible;
}
looks like you're using WPF, so you can create a boolean to visibility converter and use it with a boolean (and create a method that receives string if necessary) and just use:
<ContentControl Visibility="{Binding Path=IsControlVisible, Converter={StaticResource BooleanToVisibilityConverter}}"></ContentControl>
or any other converter...
check this links:
http://bembengarifin.wordpress.com/2009/08/12/setting-visibility-of-wpf-control-through-binding/
http://andu-goes-west.blogspot.com/2009/05/wpf-boolean-to-visibility-converter.html
http://msdn.microsoft.com/en-us/library/system.windows.controls.booleantovisibilityconverter.aspx
EDIT 1:
so then you will have to iterate over the images and check if your string is equals to name of the Image class.
something like this (not tested):
foreach (Image img in container.Items)
{
if img.Name == yourMagicallyString;
{
img.Visibility = Visibility.Visible;
}
else
{
img.Visibility = Visibility.Hidden;
}
}
If I understand correctly, you are trying to find a control based on the name or ID of the control. If so, try this:
Control changedImage = this.Controls.Find("image", false)[0];
Depending on what you are targeting and what version you might need to tweak a little
EDIT Updated per #Alexander Galkin comments about Find returning an array. There should definitely be some checking and whatnot but I'm leaving that up to the OP.
EDIT 2 For finding a control by name in WPF see this post.
The code I was looking for:
object item = FindName(IM);
Image test1 = (Image)item;
test1.Visibility = Visibility.Visible;