C#/WPF How to make close application button from a ViewModel

C#/WPF How to make close application button from a ViewModel - c#

So I am new to the whole C#/WPF thing and was wondering how to make a button that when clicked will close the application.
I have tried numerous suggestions from google searches like:
Close Window from ViewModel
WPF Close window with MVVM from ViewModel class
https://web.csulb.edu/~pnguyen/cecs475/pdf/closingwindowmvvm.pdf
https://medium.com/#franklyndejesusmejia/close-a-window-from-viewmodel-using-wpf-and-mvvm-pattern-277ec7ef1805
https://social.msdn.microsoft.com/Forums/vstudio/en-US/17aabea0-4aca-478f-9205-fcd56080b22a/how-to-close-a-window-by-clicking-the-button-using-mvvm?forum=wpf
https://www.youtube.com/watch?v=U7Qclpe2joo&ab_channel=BrianLagunas
None of which seemed to help me out properly. Below I have provided the code I currently have that I made following a tutorial on ViewModel navigation. If more code is needed let me know.
Files:
File List
MainMenuViewModel:
using Creator.Commands;
using Creator.Stores;
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;
namespace Creator.ViewModels
{
class MainMenuViewModel : ViewModelBase
{
public ICommand NavigateItemCreateMenuCommand { get; }
public MainMenuViewModel(NavigationStore navigationStore)
{
NavigateItemCreateMenuCommand = new NavigateCommand<ItemCreateMenuViewModel>(navigationStore, () => new ItemCreateMenuViewModel(navigationStore));
}
}
}
MainMenuView: Quit button must close the application
<UserControl x:Class="Creator.Views.MainMenuView"
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:Creator.Views"
mc:Ignorable="d"
d:DesignHeight="720" d:DesignWidth="1280">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<DockPanel Background="LightBlue" Grid.Row="1" Grid.Column="1" >
<StackPanel>
<Label Content="Main Menu" HorizontalAlignment="Center" VerticalAlignment="Stretch" FontWeight="Bold" FontFamily="Century Gothic" FontSize="24"/>
<Button Content="Create Item" FontWeight="Bold" FontFamily="Century Gothic" FontSize="18" Margin="20,0,20,5" Padding="0,5,0,5" Command="{Binding NavigateItemCreateMenuCommand}"/>
<Button Content="Quit" FontWeight="Bold" FontFamily="Century Gothic" FontSize="18" Margin="20,0,20,5" Padding="0,5,0,5" VerticalAlignment="Bottom"/>
</StackPanel>
</DockPanel>
</Grid>
</UserControl>
MainWindow.xaml.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Creator
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
TL;DR:
I need to make the Quit button on MainMenuViewModel/MainMenuView to close the application.

Extend your ViewModel with QuitCommand and do bind it to the Button.
class MainMenuViewModel : ViewModelBase
{
public ICommand NavigateItemCreateMenuCommand { get; }
public ICommand QuitCommand { get; }
public MainMenuViewModel(NavigationStore navigationStore)
{
NavigateItemCreateMenuCommand = new NavigateCommand<ItemCreateMenuViewModel>(navigationStore, () => new ItemCreateMenuViewModel(navigationStore));
QuitCommand = new RelayCommand((par) => { Application.Current.Shutdown(); });
}
}
<Button Content="Quit" FontWeight="Bold" FontFamily="Century Gothic" FontSize="18" Margin="20,0,20,5" Padding="0,5,0,5" VerticalAlignment="Bottom" Command="{Binding QuitCommand}"/>
Find also implementation of RelayCommand in Why RelayCommand

You should use Command to close a running window in the ViewModel.
You can import the currently running MainWindow by handing over the parent control Window to the CommandParameter.
I made a sample for you by using MVVM.
I hope it helps you.
👉Github
Structure
MainMenuView.xaml
<Grid>
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<DockPanel Style="{StaticResource MAIN.DOCK}">
<StackPanel>
<Label Style="{StaticResource MAIN.LABEL}"/>
<Button Style="{StaticResource BTN.CREATE}"/>
<Button Style="{StaticResource BTN.QUIT}"/>
</StackPanel>
</DockPanel>
</Grid>
</Grid>
MainMenuView.xaml.cs
public partial class MainMenuView : UserControl
{
public MainMenuView()
{
InitializeComponent();
DataContext = new MainMenuViewModel();
}
}
MainMenuViewModel
public class MainMenuViewModel
{
public ICommand QuitCommand { get; set; }
public MainMenuViewModel()
{
QuitCommand = new RelayCommand<object>(QuitApp);
}
private void QuitApp(object obj)
{
if (obj is Window window)
{
window.Close();
}
}
}
MainMenuResource
The whole resource source is in the Github.
<Style TargetType="{x:Type Button}" x:Key="BTN.QUIT">
<Setter Property="Command" Value="{Binding QuitCommand}"/>
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource AncestorType=Window}}"/>
<Setter Property="Content" Value="Quit"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Century Gothic"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Margin" Value="20 0 20 5"/>
<Setter Property="Padding" Value="0 5 0 5"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
</Style>

First i'll create an interface
public interface IClosable
{
Action Close { get;set; }
}
then you're viewmodel should implement this interface
MainWindowViewModel : ICloseable
{
public Action Close { get;set; }
//your code
}
then on the window
public partial class MainMenuView : Window
{
public MainMenuView()
{
InitializeComponent();
DataContext = new MainMenuViewModel();
if(DataContext is IClosable closable)
{
closable.Close += this.Close();
}
}
}
Also unhook the delegate before closing window.
Now invoking Close Action in viewmodel will close window.

Related

ViewModel issue

I need pop up a window which takes time. The button is in Pressed state until the new window is opened. Hence I want to add a wait indicator over the UI window after I click the button and before the the window opens. The code of ViewModel is correct because I referred to a sample code. But why there is no response after I click the button.
The project file URL
https://supportcenter.devexpress.com/attachment/file/5268961b-ce35-4e40-b7c1-e33bffab902b
MainWindow:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using DevExpress.Xpf.Core;
namespace WaitIndicatorDemo
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : DXWindow
{
public MainWindow()
{
InitializeComponent();
vm = new MainVM();
DataContext = vm;
}
MainVM vm;
private void buttonShow_Click(object sender, RoutedEventArgs e)
{
vm.IsBusy = !vm.IsBusy;
}
}
}
ViewMode:
using DevExpress.Mvvm;
namespace WaitIndicatorDemo
{
public class MainVM
{
private readonly ISplashScreenService _waitIndicatorService;
public virtual bool IsBusy { get; set; }
public MainVM()
{
_waitIndicatorService =
ServiceContainer.Default.GetService<ISplashScreenService>("WaitIndicatorService");
}
protected void OnIsBusyChanged()
{
if (IsBusy)
_waitIndicatorService.ShowSplashScreen();
else
_waitIndicatorService.HideSplashScreen();
}
}
}
Below is the XAML, the comment ones are the original sample code. The checkbox bind to IsBusy. The indicator pop up when the checkbox is checked. I now want to pop up after press the button.
<dx:DXWindow x:Class="WaitIndicatorDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:waitIndicatorDemo="clr-namespace:WaitIndicatorDemo"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
WindowStartupLocation="CenterScreen" SnapsToDevicePixels="True"
Title="MainWindow" Height="350" Width="525">
<!--DataContext="{dxmvvm:ViewModelSource Type=waitIndicatorDemo:MainVM}"-->
<!--Title="MainWindow" Height="350" Width="525">-->
<Grid Margin="10">
<!--<dxe:CheckEdit Content="Is Busy" IsChecked="{Binding IsBusy}"
VerticalAlignment="Top" HorizontalAlignment="Left" />
<Button Content="Button1" IsEnabled ="{Binding IsBusy, Converter={dxmvvm:BooleanNegationConverter}}"
VerticalAlignment="Top" HorizontalAlignment="Center" Click="Button_Click"/>
<Button Content="Button2" IsEnabled="{Binding IsBusy, Converter={dxmvvm:BooleanNegationConverter}}"
VerticalAlignment="Top" HorizontalAlignment="Right"/>-->
<Button x:Name="buttonShow" Content="Show" HorizontalAlignment="Left" Height="35" Margin="50,70,0,0" VerticalAlignment="Top" Width="75" Click="buttonShow_Click" />
</Grid>
</dx:DXWindow>

You have a few mistakes in your code sample :
1- The method OnIsBusyChanged in your ViewModel is never called.
2- Your XAML doesn't declare any ISplashScreenService object in the Window behaviors, like a DXSplashScreenService for instance.
Here's how you can fix both of those issues.
First, fix the ViewModel.
public class MainVM
{
private readonly ISplashScreenService _waitIndicatorService;
private bool _isBusy;
public virtual bool IsBusy
{
get
{
return _isBusy;
}
set
{
_isBusy = value;
OnIsBusyChanged();
}
}
public MainVM()
{
_waitIndicatorService =
ServiceContainer.Default.GetService<ISplashScreenService>("WaitIndicatorService");
}
protected void OnIsBusyChanged()
{
_waitIndicatorService.SetSplashScreenState("Doing some work...");
if (IsBusy)
_waitIndicatorService.ShowSplashScreen();
else
_waitIndicatorService.HideSplashScreen();
}
}
Then, your XAML.
<dx:DXWindow x:Class="WaitIndicatorDemo.MainWindow"
<!-- ... -->
Title="MainWindow" Height="350" Width="525">
<dxmvvm:Interaction.Behaviors>
<dx:DXSplashScreenService x:Name="WaitIndicatorService">
<dx:DXSplashScreenService.ViewTemplate>
<DataTemplate>
<Grid>
<Border Background="LightGray" CornerRadius="5">
<Border BorderBrush="#FF0072C6" BorderThickness="1" Margin="15" CornerRadius="5">
<Grid>
<ProgressBar BorderThickness="0" Value="{Binding Progress}" Maximum="{Binding MaxProgress}" IsIndeterminate="{Binding IsIndeterminate}" Height="12" />
<TextBlock Text="{Binding State, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Border>
</Border>
</Grid>
</DataTemplate>
</dx:DXSplashScreenService.ViewTemplate>
</dx:DXSplashScreenService>
</dxmvvm:Interaction.Behaviors>
<Grid Margin="10">
<!-- ... -->
</Grid>
</dx:DXWindow>
This code was mainly taken from the How to: Use DxSplashScreenService sample.

Unable to bind my Button to create a new tab dynamically

I am new to c# and wpf.
Im my project I am trying to create a new tabs/ remove tab dynamically using button click.
But I am not successfull.
Kindly suggest where I am wrong.
I have taken help from here
https://www.technical-recipes.com/2017/adding-tab-items-dynamically-in-wpf/
I did DataBinding using command for Add/Remove of tab.
I have other .cs files similar as mentioned above. Hence not copy-pasting them here.
Below is my code:
MainWindow.xaml
<Window x:Class="UI_1.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:UI_1"
mc:Ignorable="d"
Title="MainWindow" Height="650" Width="758">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="20.8"/>
<RowDefinition Height="Auto" MinHeight="118.4"/>
<RowDefinition MinHeight="118.4" Height="228"/>
<RowDefinition />
<RowDefinition Height="13*" />
</Grid.RowDefinitions>
<Menu Grid.Row="0" Margin="0,0,-0.4,118.2" Grid.RowSpan="2" >
<MenuItem Header="File">
<MenuItem Header="Open Log File" />
<MenuItem Header="Open Workspace" />
<Separator />
<MenuItem Header="Save as Workspace" />
<MenuItem Header="Set Path host file" />
</MenuItem>
<MenuItem Header="Control">
<MenuItem Header="Open Command Line View" />
</MenuItem>
</Menu>
<WrapPanel Grid.Row="1" Grid.RowSpan="2" Margin="0,0.2,-0.4,0.2" >
<WrapPanel.Resources>
<Style TargetType="Grid">
<Setter Property="Margin" Value="3"/>
</Style>
</WrapPanel.Resources>
<Border BorderBrush="Black" BorderThickness="1" Grid.Column="0">
<Grid Width="180">
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="1"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<TextBlock Grid.Column="0" Grid.ColumnSpan="4" VerticalAlignment="Center" Text="Connect To" Margin="3,6,2.8,6" />
<TextBlock Grid.Row="1" Grid.ColumnSpan="4" VerticalAlignment="Center" Text="Log Cmd" Margin="3,8,2.8,8" />
<TextBox Grid.Column="3" Grid.ColumnSpan="3" Text="IP/HostName" Margin="32,3,3.2,3"/>
<ComboBox
x:Name="Job" Grid.Row = "1" Grid.Column="3" Grid.ColumnSpan="3" Margin="32,3,42.2,6">
<ComboBoxItem Content="Trace"/>
<ComboBoxItem Content="List"/>
<ComboBoxItem Content="Dump"/>
<ComboBoxItem Content="Off"/>
<ComboBoxItem Content="On"/>
</ComboBox>
<TextBox Grid.Column="5" Grid.Row = "1" Text="Line" Margin="6.4,3,2.2,6"/>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="6*"/>
<ColumnDefinition Width="27*"/>
<ColumnDefinition Width="45*" />
<ColumnDefinition Width="45*" />
<ColumnDefinition Width="46*" />
</Grid.ColumnDefinitions>
</Grid>
</Border>
<GridSplitter Width="2"></GridSplitter>
<Border BorderBrush="Black" BorderThickness="1" >
<Grid Grid.Column="1" Width="120">
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2"/>
</Style>
</Grid.Resources>
<Button Content="Play" Margin="2,5,2.2,2"
Command="{Binding x.AddItem}"/>
<Button Content="Stop" Grid.Column="1" Margin="2,5,2.2,2"
Command="{Binding x.RemoveTab}"/>
<Button Content="Send" Grid.ColumnSpan="2" Grid.Row="1" />
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</Border>
<Border BorderBrush="Black" BorderThickness="1" Height="456" Grid.Row="3" >
<TabControl x:Name="tabControl1" HorizontalAlignment="Stretch" MinHeight="50" Margin="0,0.2" Width="736"
ItemsSource="{Binding Titles, Mode=TwoWay}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding Content}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Border>
</WrapPanel>
</Grid>
</Window>
MainWindow.XAML.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace UI_1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
class MainWindowVM : INotifyPropertyChanged
{
public class Item
{
public string Header { get; set; }
public string Content { get; set; }
}
public ObservableCollection<Item> Titles
{
get { return _titles; }
set
{
_titles = value;
OnPropertyChanged("Titles");
}
}
static int tabs = 1;
private ObservableCollection<Item> _titles;
private ICommand _addTab;
private ICommand _removeTab;
public ICommand AddTab
{
get
{
return _addTab ?? (_addTab = new TabRelayCommand(
x =>
{
AddTabItem();
}));
}
}
public ICommand RemoveTab
{
get
{
return _removeTab ?? (_removeTab = new TabRelayCommand(
x =>
{
RemoveTabItem();
}));
}
}
private void RemoveTabItem()
{
Titles.Remove(Titles.Last());
tabs--;
}
private void AddTabItem()
{
var header = "Tab " + tabs;
var content = "Content " + tabs;
var item = new Item { Header = header, Content = content };
Titles.Add(item);
tabs++;
OnPropertyChanged("Titles");
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public partial class MainWindow : Window
{
public MainWindowVM x;
public MainWindow()
{
InitializeComponent();
x = new MainWindowVM();
this.DataContext = x;
}
}
After clicking my Play button no new tab is adding

How to add different ListBox items WPF

I am implementing a chat application like this image:
I started by creating a ListBox and setting a ListBox.ItemTemplate, but i can't figure out how can i control the ListBox to add an item with the layout as a message received or as send (just like Whatsapp).
Here is my code:
<ListBox Name="ChatListBox" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="#00FFFFFF" BorderBrush="{x:Null}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="#00FFFFFF"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Focusable" Value="False"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<!--If the user sends a msg-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Margin="0" BorderThickness="1" BorderBrush="#9f9f9f" Background="#c4df9b" CornerRadius="10">
<TextBlock Name="MsgText" Background="#c4df9b" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Margin="5" Text="{Binding text}" FontSize="14"/>
</Border>
<Image Grid.Column="1" Source="Images/user.png" Margin="5" Height="{Binding ElementName=MsgText, Path=ActualHeight}"/>
<!--
If the user receives a msg
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="9*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Images/user.png" Margin="5" Height="{Binding ElementName=MsgText, Path=ActualHeight}"/>
<Border Grid.Column="1" Margin="0" BorderThickness="1" BorderBrush="#9f9f9f" Background="#c4df9b" CornerRadius="10">
<TextBlock Name="MsgText" Background="#c4df9b" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Margin="5" Text="{Binding text}" FontSize="14"/>
</Border>-->
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Here is my c# code:
List<ChatItem> chatItem = new List<ChatItem>();
chatItem.Add(new ChatItem() { text = "Hello...", isFromUser = false });
chatItem.Add(new ChatItem() { text = "hi!", isFromUser = true });
chatItem.Add(new ChatItem() { text = "this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test", isFromUser = false });
ChatListBox.ItemsSource = chatItem;
This is how the ListBox is redered:
Is there any way of adding an IF statement at the ListBox with WPF? or how can i control which ListBox.ItemTemplate to add.

If your messages are of the same class you could use itemsTemplateSelector as in http://codingbandit.com/blog/?p=8
if there are different classes you should just use the datatemplate datatype property as in Conditional List itemtemplate or datatemplate in WPF

Another option is to simply use a data trigger:
<DataTemplate x:Key="ToTemplate">
... etc ...
</DataTemplate>
<DataTemplate x:Key="FromTemplate">
... etc ...
</DataTemplate>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<DataTrigger Binding="{Binding isFromUser}" Value="false">
<Setter Property="Template" Value="{StaticResource ToTemplate}" />
</DataTrigger>
<DataTrigger Binding="{Binding isFromUser}" Value="true">
<Setter Property="Template" Value="{StaticResource FromTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>

Maybe this will give you an idea
Xaml
<Window x:Class="Q1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Q1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="intDataTemplate">
<TextBox Text="{Binding Path=.}" Width="80"/>
</DataTemplate>
<DataTemplate x:Key="stringDataTemplate">
<TextBlock Text="{Binding Path=.}"/>
</DataTemplate>
<local:MyDataTemplateSelector IntDataTemplate="{StaticResource intDataTemplate}"
StringDataTemplate="{StaticResource stringDataTemplate}"
x:Key="myDataTemplateSelector"/>
</Window.Resources>
<Grid>
<ListBox x:Name="myListBox" ItemsSource="{Binding}"
ItemTemplateSelector="{StaticResource myDataTemplateSelector}">
</ListBox>
</Grid>
Code-Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Q1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<System.Object> myList = new List<object>();
myList.Add(1);
myList.Add("Alpha");
myList.Add(2);
myList.Add("Beta");
myList.Add(3);
myList.Add("Gamma");
myListBox.DataContext = myList;
}
}
}
DataTemplateSelector
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Q1
{
public class MyDataTemplateSelector : System.Windows.Controls.DataTemplateSelector
{
public System.Windows.DataTemplate IntDataTemplate { get; set; }
public System.Windows.DataTemplate StringDataTemplate { get; set; }
public MyDataTemplateSelector()
{
IntDataTemplate = new System.Windows.DataTemplate();
StringDataTemplate = new System.Windows.DataTemplate();
}
public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
{
if (item is Int32)
{
return IntDataTemplate;
}
else
{
return StringDataTemplate;
}
}
}
}

You could use DataTemplateSelector to select the Template according with your data, here's an example.
For this example, I'll use messages, a client message and a server message:
public abstract class Message
{
public string Content { get; set; }
public override string ToString()
{
return Content;
}
}
public class ServerMessage : Message
{
}
public class ClientMessage : Message
{
}
In this way, I can check the type of the object and apply certain template.
Let's define our templates and selector:
XAML:
<DataTemplate x:Key="clientTemplate" >
<TextBlock Text="{Binding Content}"
Foreground="Red"/>
</DataTemplate>
<DataTemplate x:Key="serverClient">
<TextBlock Text="{Binding Content}"
Foreground="Green"/>
</DataTemplate>
<local:MessageTemplateSelector x:Key="messageSelector"
ServerTemplate="{StaticResource serverClient}"
ClientTemplate="{StaticResource clientTemplate}"/>
DataTemplateSelector
public class MessageTemplateSelector : DataTemplateSelector
{
public DataTemplate ClientTemplate { get; set; }
public DataTemplate ServerTemplate { get; set; }
public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
{
if (item.GetType() == typeof(ClientMessage))
return ClientTemplate;
return ServerTemplate;
}
}
First of all, as you can see I create two DataTemplate properties on my Selector, which I set it by XAML, doing this is easy to retrieve the DataTemplate, and finally I just compare the item received by parameter, which is the binded object(Message), and check its type and return the template.
And that is it, it works like expected.
UPDATE: Let's supposed that you want Template your items based on their types, just like my example, you could this the same thing above without using TemplateSelector, you could define the DataType of your Template:
<Window.Resources>
<DataTemplate DataType="{x:Type local:ClientMessage}">
<TextBlock Text="{Binding Content}"
Foreground="Red"/>
</DataTemplate>
<DataTemplate DataType="{x:Type local:ServerMessage}">
<TextBlock Text="{Binding Content}"
Foreground="Green"/>
</DataTemplate>
</Window.Resources>
Doing so, the Template will be selected automatically according the type of the object.

C# WPF application using data binding, data templates and observable collection

I am making a program in C# WPF using data binding, data templates and observable collection. I am basing my application on the Data Binding Demo from http://msdn.microsoft.com/en-us/library/vstudio/ms771319(v=vs.90).aspx. For some reason I cannot make my program display any data from binding. Debugging tells me that my Records class collection works but on this line:
records_collection_db = (CollectionViewSource)(this.Resources["records_collection_db"]);
my 'records_collection_db' variable in null whereas it should be holding some data. I suspect that that my CollectionViewSource in xaml line is set incorrectly but I don't really know how to fix it. It is my first program in WPF and so I don't have much experience on the subject. At this moment the only visible difference between my code and the one from sample is that my initial window is... a where in the demo it an
Code (or at least shortened version of it):
Record class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Collections.ObjectModel;
using System.ComponentModel;
namespace WpfApplication1
{
public class Record : INotifyPropertyChanged
{
private int Lp;
private string group;
public event PropertyChangedEventHandler PropertyChanged;
public int _Lp
{
get { return this.Lp; }
set { this.Lp = value; OnPropertyChanged("_Lp"); }
}
public string _group
{
get { return this.group; }
set { this.group = value; OnPropertyChanged("_group"); }
}
public Record(int Lp, string group)
{
this.Lp = Lp;
this.group = group;
}
protected void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
}
Initial window
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Data;
using System.Xml;
using System.Configuration;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var newWindow1 = new Audyt_window();
newWindow1.Show();
}
}
}
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:WpfApplication1"
xmlns:System="clr-namespace:System;assembly=Mscorlib"
Title="MainWindow" Height="350" Width="525"
WindowStartupLocation="CenterScreen"
>
<Window.Resources>
<Style x:Key="text_style" TargetType="TextBlock">
<Setter Property="Foreground" Value="#333333" />
</Style>
</Window.Resources>
<Grid>
<Button Content="Start" HorizontalAlignment="Left" Margin="36,36,0,0" VerticalAlignment="Top" Width="178" Height="93" Click="Button_Click"/>
<Button Content="Zamknij" HorizontalAlignment="Left" Margin="202,223,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content="Rekordy" HorizontalAlignment="Left" Margin="318,56,0,0" VerticalAlignment="Top" Width="108" Height="52" Click="Button_Click_2" />
<Button Content="Dodaj" HorizontalAlignment="Left" Margin="351,157,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_3"/>
</Grid>
</Window>
Operational window
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Data;
using System.Data.SqlClient;
using System.Diagnostics;
using System.ComponentModel;
namespace WpfApplication1
{
public partial class Audyt_window : Window
{
CollectionViewSource records_collection;
private ObservableCollection<Record> records = new ObservableCollection<Record>();
public ObservableCollection<Record> Records
{
get { return this.records; }
set { this.records = value; }
}
public Audyt_window()
{
load_temp_data();
InitializeComponent();
records_collection = (CollectionViewSource)(this.Resources["records_collection"]);
}
private void load_temp_data()
{
Record rek1 = new Record(601, "Gr1", "Pro1", "Pyt1", 600001, "Kat1", false, false);
Record rek2 = new Record(602, "Gr2", "Pro2", "Pyt2", 600002, "Kat2", false, false);
Record rek3 = new Record(603, "Gr3", "Pro3", "Pyt3", 600003, "Kat3", false, false);
this.Records.Add(rek1);
this.Records.Add(rek2);
this.Records.Add(rek3);
}
}
}
<Window x:Class="WpfApplication1.Audyt_window"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Audyt"
xmlns:src="clr-namespace:WpfApplication1"
ResizeMode="NoResize"
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterScreen"
>
<Window.Resources>
<CollectionViewSource Source="{Binding Source={x:Static Application.Current}, Path=Records}" x:Key="records_collection" />
<Style x:Key="text_style" TargetType="TextBlock">
<Setter Property="Foreground" Value="#333333" />
</Style>
<DataTemplate x:Key="Records_Template" DataType="{x:Type src:Record}">
<Border BorderThickness="2" BorderBrush="Navy" Padding="7" Name="Record_List_Border" Margin="3" Width="345">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Background="Aqua" Grid.Row="0" Grid.Column="0"
Name="textblock_Lp"
Style="{StaticResource text_style}"
Text="Lp: "
>
</TextBlock>
<TextBlock Background="Azure" Grid.Row="0" Grid.Column="1"
Name="datablock_Lp"
Style="{StaticResource text_style}"
Text="{Binding Path=_Lp}"
>
</TextBlock>
<TextBlock Background="Aqua" Grid.Row="0" Grid.Column="2"
Name="datablock_group"
Style="{StaticResource text_style}"
Text="{Binding Path=_group}"
>
</TextBlock>
</Grid>
</Border>
</DataTemplate>
</Window.Resources>
<Border Padding="10">
<Grid>
<ListBox Name="Hits_View_List" HorizontalAlignment="Left" VerticalAlignment="Top"
Height="525" Width="400" Margin="420,0,0,0"
BorderThickness="2" BorderBrush="DimGray"
ItemsSource="{Binding Source={StaticResource records_collection}}"
>
</ListBox>
</Grid>
</Border>
</Window>

In your Audyt_window you set the source of your binding of the CollectionViewSource to {x:Static Application.Current}, but the Records ObservableCollection is declared inside your Audyt_window
Change:
<CollectionViewSource Source="{Binding Source={x:Static Application.Current}, Path=Records}" x:Key="records_collection" />
To
<CollectionViewSource Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Window}, Path=Records}" x:Key="records_collection" />
And it should work I think.

you Name your collectionviewsource
x:Key="records_collection"
and you are searching for records_collection_db... that cant match
records_collection_db = (CollectionViewSource)(this.Resources["records_collection_db"]);
Change the Key or Change the string to the right name

how to make user control return its item?

I have a user control with a canvas on it. I want to be able to reference the canvas element, but I can't.
I tried to create a method in the code-behind to return the canvas, but it doesn't work, because when I need to use it I must create a new instance of the user control and that will contain an empty canvas. I need the canvas that's in the current showing window.
Here is the method that I have created to return the canvas:
public DesignerCanvas ret()
{
return this.MyDesigner;
}
Here is the XAML:
<UserControl x:Class="DiagramDesigner.WindowsUserControl"
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:s="clr-namespace:DiagramDesigner"
xmlns:usercontrols="clr-namespace:DiagramDesigner"
xmlns:c="clr-namespace:DiagramDesigner.Controls"
mc:Ignorable="d"
d:DesignHeight="700" d:DesignWidth="1000">
<UserControl.Resources>
<ContextMenu x:Key="DesignerCanvasContextMenu" >
<MenuItem Header="Paste" Command="{x:Static ApplicationCommands.Paste}">
<MenuItem.Icon>
<Image Source="Resources/Images/Paste.png" Width="16"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Select All" Command="{x:Static s:DesignerCanvas.SelectAll}"/>
</ContextMenu>
</UserControl.Resources>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- Toolbox -->
<StackPanel Grid.Column="0" Margin="0,0,5,0" >
<usercontrols:UserControl1></usercontrols:UserControl1>
</StackPanel>
<!-- GridSplitter -->
<GridSplitter Focusable="False" Width="2" Background="LightGray"
VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<!-- Designer -->
<GroupBox Header="Diagram" Grid.Column="1" Margin="3,0,0,0">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<s:DesignerCanvas Focusable="true" x:Name="MyDesigner"
Background="{StaticResource WindowBackgroundBrush}"
Margin="10" FocusVisualStyle="{x:Null}"
ContextMenu="{StaticResource DesignerCanvasContextMenu}"/>
</ScrollViewer>
</GroupBox>
</Grid>
</Grid>
</UserControl>
and here is my usercontrol.xaml.cs code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace DiagramDesigner
{
/// <summary>
/// Interaction logic for WindowsUserControl.xaml
/// </summary>
public partial class WindowsUserControl : UserControl
{
public WindowsUserControl()
{
InitializeComponent();
}
public DesignerCanvas ret()
{
return this.MyDesigner;
}
}
}
the mainwindow.xaml code
<Window x:Class="DiagramDesigner.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:DiagramDesigner"
xmlns:c="clr-namespace:DiagramDesigner.Controls"
xmlns:usercontrols="clr-namespace:DiagramDesigner"
WindowStartupLocation="CenterScreen" WindowState="Maximized"
Title="GEN Diagram Designer"
Height="700" Width="1000" Icon="Resources/Images/coollogo_com-61024358.png">
<Window.Resources>
<ContextMenu x:Key="DesignerCanvasContextMenu">
<MenuItem Header="Paste" Command="{x:Static ApplicationCommands.Paste}">
<MenuItem.Icon>
<Image Source="Resources/Images/Paste.png" Width="16"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Select All" Command="{x:Static s:DesignerCanvas.SelectAll}"/>
</ContextMenu>
</Window.Resources>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl Content="{StaticResource MyToolbar}"/>
<Button Margin="776.346,40.022,75.653,39.977" Click="Button_Click_1" Width="120" Height="40" >Generate Code</Button>
<Grid Grid.Row="1">
<usercontrols:WindowsUserControl Loaded="WindowsUserControl_Loaded">
</usercontrols:WindowsUserControl>
</Grid>
</Grid>
</Window>
my mainwindow.xaml.cs code
using System.Windows;
using System.Collections.Generic;
using System.Xml;
using System.Linq;
namespace DiagramDesigner
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
XmlDocument doc = new XmlDocument();
XmlElement elem = doc.CreateElement("code");
doc.AppendChild(elem);
List<DesignerItem> L = new List<DesignerItem>();
foreach (DesignerItem d in ***)
{
L.Add(d);
}
var orderedItems = L.OrderBy(item => DesignerCanvas.GetTop(item)).ToList();
foreach (DesignerItem d in orderedItems)
{
XmlNode ChildNode = doc.ImportNode(d.s.code(), true);
doc.FirstChild.AppendChild(ChildNode);
}
doc.Save(#"D:\code.xml");
}
private void WindowsUserControl_Loaded(object sender, RoutedEventArgs e)
{
}
}
}
in the mainwindow.xaml.cs
the first for each * here where i want to get my canvas

Give your control a name:
<usercontrols:WindowsUserControl Loaded="WindowsUserControl_Loaded" x:Name="someName" />
Then just reference the control using that name:
private void WindowsUserControl_Loaded(object sender, RoutedEventArgs e)
{
var theCanvasFromTheUserControl = someName.ret();
// now do something with theCanvasFromTheUserControl
}

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

C#/WPF How to make close application button from a ViewModel - c#

Related

ViewModel issue

Unable to bind my Button to create a new tab dynamically

How to add different ListBox items WPF

C# WPF application using data binding, data templates and observable collection

how to make user control return its item?

Categories

Resources