How to generate GUI dynamically using WPF-MVVM - c#

I am working on a wpf application strictly using MVVM. What i want to do is pop up a window which will pop up on a button click.
This window size will be determined dynamically depending upon the input that i have received from the pervious form submission on button click.
If the input given was 1 then on this window i will have GUI like: (where * represents the boundary)
********************************************
GUI : some textbox and buttons
********************************************
If the input given was 2 :
********************************************
GUI : some textbox and buttons
********************************************
********************************************
GUI : some textbox and buttons
********************************************
How to do this using MVVM approach ? Should i code for it using c# (because the input will be given dynamically)
What i have done is (tableView.xaml, on which will contain the GUI i shown you previously):
<UserControl x:Class="DBPythonAndXmlGenerator.View.tableView"
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"
d:DesignHeight="300" d:DesignWidth="300"
xmlns:local="clr-namespace:DBPythonAndXmlGenerator.ViewModel"
xmlns:converters="clr-namespace:DBPythonAndXmlGenerator.converters"
>
<UserControl.Resources>
<converters:Table x:Key="TableCoverter" />
</UserControl.Resources>
<Grid>
</Grid>
</UserControl>
And my button click function (MVVM) is below:
public ICommand SavePersonCommand
{
get
{
if (savePersonCommand == null)
savePersonCommand = new DelegateCommand(new Action(SaveExecuted), new Func<bool>(SaveCanExecute));
return savePersonCommand;
}
}
public bool SaveCanExecute()
{
return !string.IsNullOrEmpty(DB_Col.DbName) && !string.IsNullOrEmpty(DB_Col.NumTables);
}
public void SaveExecuted()
{
System.Windows.MessageBox.Show(string.Format("Saved: {0} {1} ", DB_Col.DbName, DB_Col.NumTables));
}
How to render data in this Grid dynamically using c# follwing MVVM If my approach is right?

Related

WPF data binding is not working for second usage

I'm using GalaSoft.MvvmLight.Messaging for communication between classes.
From my ViewModel I'm asking for an object of type view to use it as the content of my DialogHost ( part of the MaterialDesign Framework ):
ViewModel:
Messenger.Default.Send(new NotificationMessage("dialogFormOpenStaple"));
-
private void DialogReceived(string msg, object param)
{
if (msg == "dialogFormOpenStaple")
{
this.dialogContent = param;
this.isDialogOpen = true;
}
}
View
private void NotificationMessageReceived(string msg)
{
if (msg == "dialogFormOpenStaple")
{
object content = new dialogEditMode();
Messenger.Default.Send(new NotificationMessage<object>(content, "dialogFormOpenStaple"));
}
}
All this is working fine. In my XAML itself I got some button bindings to RelayCommands.
<UserControl x:Class="kati2._0.production.dialogEditMode"
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:kati2._0.production"
mc:Ignorable="d"
>
[...]
<Button Margin="8 0 0 0" Style="{DynamicResource MaterialDesignFlatButton}" Foreground="#FF757476" IsDefault="True" Command="{Binding dialogOpenStapleNo}">No</Button>
[...]
</UserControl>
Those RelayCommands are defined in my ViewModel. When I open die Dialog for the first time and click on the button it's working fine. If I try it a second time the dialog also opens up but the click event is not getting triggered.

How to populate WPF window from database [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to auto load some data from database to populate some text boxes and combo boxes when a new window is loaded.
For example when I click a button in window1, window1 will show a new window window2 and pass an ID to window2 (id is required for querying database).
How can i do that?
Thanks,
This is just a very simple example of what you can do:
MainWindow.xaml
<Window x:Class="WpfApplication1.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>
<Button Name="btn1" Click="btn1_Click" Content="Button" Margin="10,10,361,283"></Button>
</Grid>
</Window>
MainWindow.xaml.cs
private void btn1_Click(object sender, RoutedEventArgs e)
{
Window2 win2 = new Window2(1);
win2.Show();
}
Window2.xaml
<Window x:Class="WpfApplication1.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300">
<Grid Margin="0,0,170,249">
<TextBox Name="txtBox1" Margin="18,160,-18,-173"></TextBox>
<TextBox Name="txtBox2" Margin="18,119,-18,-134"></TextBox>
<TextBox Name="txtBox3" Margin="18,76,-18,-93"></TextBox>
<TextBox Name="txtBox4" Margin="18,36,-18,-50"></TextBox>
</Grid>
</Window>
Window2.xaml.cs
public partial class Window2 : Window
{
public Window2(int Id)
{
InitializeComponent();
ReadDataFromDB(Id);
}
public void ReadDataFromDB(int Id)
{
//read your data
txtBox1.Text = "Some value 1";
txtBox2.Text = "Some value 2";
txtBox3.Text = "Some value 3";
txtBox4.Text = "Some value 4";
}
}
Use Entity Framework.
Follow below tutorials..
http://blogs.msdn.com/b/wriju/archive/2010/06/09/ado-net-entity-framework-4-0-loading-data-in-4-ways.aspx
https://msdn.microsoft.com/en-us/library/aa697427(v=vs.80).aspx
1)Create ui elements in the window
2)Create a model class with the required fields.
3)While clicking the
button in window1 pass the id to the constructor of the next window.
4).Using the id query the database based on your need.Get the results
and bind the fields to the ui elements values.
5).These database querying and all can be written inside your
constructor or window load event.
You can accomplish this using MVVM.No need to write excess code for setting the values to the ui.

Silverlight: Creating object from subclass of UserControl fails

I have a custom control CustomStackPanel which is a subclass of the StackPanel containing a CheckBox. The XAML is
<StackPanel x:Class="MyApp.CustomStackPanel"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Orientation="Horizontal">
<CheckBox IsChecked="True">check me</CheckBox>
</StackPanel>
and the code behind doesn't do much:
namespace MyApp
{
public partial class CustomStackPanel: StackPanel
{
public CustomStackPanel()
{
InitializeComponent(); // added by Visual Studio
}
}
}
I can add the CustomStackPanel to the MainPage via XAML like
<local:CustomStackPanel />
and a CheckBox appears when I run the program. If instead I try to create a panel dynamically and add it to a container the CheckBox does not appear on the screen.
Old code:
...
StackPanel sp = new StackPanel();
sp.Add(new CheckBox());
somewhere.Add(sp);
...
--> I see a checkbox
New code:
...
somewhere.Add(new CustomStackPanel());
...
--> No checkbox

Pop context menu in textbox when # is input

I am trying to build a chat application, I would like to mimic facebook tag friends functionality. When the user types # in the textblock, I want to pop a context menu with a list of items. How can this be triggered in wpf mvvm app?
Example.
I would do it the following way :
Subscribe to the TextChanged event and whenever there is a change that contains # then show the popup, otherwise hide it.
Note that it tracks for new changes in the TextBox, therefore the popup will disappear as soon as the user presses another key or in your case when the user selected a user from the auto-completion you have provided in the pop-up.
User hasn't typed #
User just typed #
<Window x:Class="WpfApplication11.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>
<Popup x:Name="MyPopup" Placement="Center">
<Popup.Child>
<Border BorderBrush="Red" BorderThickness="1" Background="White">
<Grid>
<TextBlock>My popup</TextBlock>
</Grid>
</Border>
</Popup.Child>
</Popup>
<TextBox TextChanged="TextBoxBase_OnTextChanged" />
</Grid>
</Window>
Code behind:
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication11
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void TextBoxBase_OnTextChanged(object sender, TextChangedEventArgs e)
{
var textBox = (TextBox) sender;
foreach (TextChange textChange in e.Changes)
{
string substring = textBox.Text.Substring(textChange.Offset, textChange.AddedLength);
if (substring == "#")
{
MyPopup.IsOpen = true;
}
else
{
MyPopup.IsOpen = false;
}
}
}
}
}
That said, you might want to further enhance it and integrate it properly your application ;-)

How to Write inside a Dock Content in C#

There is a DockPanel and when I exercise this code it adds the dock content to the right Dock BUT I can't get it to show the text (i.e. Perform Step1 and Step2 etc. as seen below). I have done so much research, nothing has worked. Thanks in advance for your help.
public void ShowInstructionForm()
{
dragDropForm = new DockContent();
dragDropForm.Name = "Hints";
dragDropForm.TabText = "Hints2";
dragDropForm.ShowHint = DockState.DockRight;
dragDropForm.BackColor = Color.White;
dragDropForm.Text = "- Perform the step number 1 ."
+ Environment.NewLine + " - Perform the Step number 2";
try
{
dragDropForm.Show(this.oDock.MainDock);
}
catch (Exception e)
{
MessageBox.Show(this.oDock.MainDock, "error happened " + e.Message);
}
}
Personally I would use data binding to achieve what it is you want so that you are adhering to a more rigid design pattern.
XAML
<Window x:Class="WpfApplication1.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"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<DockPanel>
<TextBlock Text="{Binding Path=Foo}" />
</DockPanel>
</Window>
C#
public partial class MainWindow : Window
{
public string Foo { get; set; }
public MainWindow()
{
Foo = "hello world"; // Changing Foo 'automagically' changes your textblock value
InitializeComponent();
}
}
This allows you to be more flexible by having your business logic separated from your UI code. Obviously this is just an example of data binding with a text block inside a dock panel but hopefully this gives you a better understanding.
Can you go into xaml and place a textblock in in the DockPanel like this:
<DockPanel>
<TextBlock Text="- Perform the step number 1 ."/>
</DockPanel>

Categories

Resources