Develop Reference

How to reuse WPF custome window

I have created custome window (titlebar, min/max/ext buttons, own border for window manipulation and lots of styles and triggers).
There are 5 methods defined (which i would like to override):
From window markup:
SourceInitialized="Window_SourceInitialized"
Closing="Window_Closing"
From Titlebar buttons:
Exit_Click()
Max_Click()
Min_Click()
And at last I have DockPanel
<DockPanel Name="ClientArea"/>
In which I want to put my content
I have tried to add content from code:
BaseWindow editInterfaceWindow = new BaseWindow() { Owner = this };
editInterfaceWindow.DataContext = new EditInterface();
editInterfaceWindow.ShowDialog();
But this way some bindings stoped working and inside editInterfaceWindow I cant create another window this way because of Owner = this. There are also some problems with InitializeComponent() in constructor.
And ListView inside EditInterface UserControl <ListView Name="LBAvaliable" ItemsSource="{Binding AvaliableFaces, UpdateSourceTrigger=PropertyChanged}"> is not visible in code as LBAvaliable.
I have used that window few times, filling ClientArea with content by hand.
How should I create other windows, so that I can just inherit it or just define binding? So my XAML for every single window does not take ~1000 lines of code.

In the past I've used MVVMCross Framework and we never had to worry about this ourselves. Though this is not the best, here's an idea on what you can do.
Create a view model that can be overridden for your user control.
Set data templates.
Programmatically change the view model for your user control's main content and let data templates do the work for the UI.
View Model: Pre-defined 3 button actions ready for you to set/override.
public class MainUCViewModel : ViewModelBase
{
private Action<object> btnACommand;
private Action<object> btnBCommand;
private Action<object> btnCCommand;
private object ccVM;
public ViewModelBase CCVM
{
get { return this.ccVM; }
set
{
this.ccVM = value;
OnPropertyChanged(); // Notify View
}
}
public MainUCViewModel()
{
}
public RelayCommand BtnACommand
{
get { return new RelayCommand(btnACommand); }
}
public RelayCommand BtnBCommand
{
get { return new RelayCommand(btnBCommand); }
}
public RelayCommand BtnCCommand
{
get { return new RelayCommand(btnCCommand); }
}
public void SetBtnACommand(Action<object> action)
{
this.btnACommand = action;
}
public void SetBtnBCommand(Action<object> action)
{
this.btnBCommand = action;
}
public void SetBtnCCommand(Action<object> action)
{
this.btnCCommand = action;
}
}
View:
<UserControl x:Class="WpfApplication1.Views.UserControls.MainUC"
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="500" d:DesignWidth="750">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal">
<Button Command="{Binding BtnACommand}" Width="100">
<TextBlock>A</TextBlock>
</Button>
<Rectangle Width="15" />
<Button Command="{Binding BtnBCommand}" Width="100">
<TextBlock>B</TextBlock>
</Button>
<Rectangle Width="15" />
<Button Command="{Binding BtnCCommand}" Width="100">
<TextBlock>C</TextBlock>
</Button>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<ContentControl x:Name="CCMain" Content="{Binding CCVM}"/>
</Grid>
</Grid>
</UserControl>
Look at Thinking with MVVM: Data Templates + ContentControl. Simply define the data template for your view model.
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:GeneralSettingsViewModel}">
<View:GeneralSettingsView/>
</DataTemplate
<DataTemplate DataType="{x:Type ViewModel:AdvancedSettingsViewModel}">
<View:AdvancedSettingsView/>
</DataTemplate>
</Window.Resources>
What I’m saying here is that GeneralSettingsViewModel should be
rendered using a GeneralSettingsView. That’s exactly what we need !
Because the Views are created using a DataTemplate, we do not need to
setup the DataContext, it will be automatically registered to the
templated object, the ViewModel.

There are two main approaches to your problem:
Inherited windows
Configurable windows
For approach 1, design your window and make the methods overrideable:
In base window xaml, assign the handlers and everything you want:
<Window x:Class="WpfTests.MainWindow"
...
SourceInitialized="Window_SourceInitialized">
In base window, define the handlers as protected virtual (or abstract, if you like to enforce their implementation)
public partial class MainWindow : Window
{
// ...
protected virtual void Window_SourceInitialized(object sender, EventArgs e)
{
}
// ...
}
Create derived windows
public class ExWindow : MainWindow
{
protected override void Window_SourceInitialized(object sender, EventArgs e)
{
// specialized code here
}
}
Change App.xaml to use Startup instead of StartupUri
<Application x:Class="WpfTests.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Startup="Application_Startup">
And manually create your first window, chosing one of the inherited window classes
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
var window = new ExWindow();
window.Show();
}
}
The second approach - configurable windows - follows the same principle as a good user control design: The window/control properties are controlled by the creator instead of being controlled by the window/control itself.
So, instead of defining some event handler within the window code, just leave this exercise to the user, who hopefully knows what the window should do:
public partial class MainWindow : Window
{
// I don't care for SourceInitialized (also remove it from XAML)
}
In App.xaml or wherever a window is created:
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
var window = new MainWindow();
window.SourceInitialized += window_SourceInitialized;
window.Show();
}
void window_SourceInitialized(object sender, EventArgs e)
{
var window = sender as MainWindow;
// I know how to handle this event for this window instance
}
}

WPF | Attach a frame to more page

I've got MainWindow in my WPF project, into this class there is a Frame.
<Window x:Class="Gestionale.MainWindow>
<Grid>
<Frame x:Name="frameChanger"/>
<Button x:Name="Prenotation"/>
</Grid>
</Window>
When I click the button Add the frame shows the page Prenotation with this function:
public partial class MainWindow : Window
{
private void Add_Click(object sender, RoutedEventArgs e)
{
enabled_button();
camereButton.IsEnabled = false;
try
{
frameChanger.Navigate(new framePrenotation());
}
catch(Exception ex) { MessageBox.Show("Error!"); }
}
}
The page prenotation has other 3 button:
<Page x:Name="Gestionale.AddPrenotation">
<Grid>
<Button x:Name="DeletePrenotation"/>
<Button x:Name="AlterPrenotation"/>
<Button x:Name="AddPrenotation"/>
</Grid>
</Page>
I need the frameChanger references to AddPrenotation page when I click on "AddPrenotation". How can I do it?
Any guidance will be appreciated
Thanks, Davide

try to write a constructor with parameter into the Page
frameChanger.Navigate(new framePrenotation(frameChanger));`
...
public partial class framePrenotation: Page
{
private Frame frameParent;
public framePrenotation(Frame frame)
{
this.frameParent= frame;
...
}
...
}
but I don't see why you should do something like that...

Get content of a previous tab on SelectionChanged event

Im trying to get the previous selected tabs content when it is changed to another in a TabControl. For this i subscribe to the SelectionChanged event like so:
tabControl.SelectionChanged += getPreviousData
Then the getPreviousData method looks like this:
private void getPreviousData(object sender, SelectionChangedEventArgs e)
{
e.RemovedItems[0].something
}
Im a little unsure as to how i grab the previous tab content. The previous tab has a textbox control that i need to get the name of, when i change the tab. How can i accomplish that?

Assuming you have a XAML like that
<TabControl x:Name="tabControl" SelectionChanged="tabControl_SelectionChanged">
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5">
<TextBox Width="100" Height="23"></TextBox>
</Grid>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5">
<TextBlock x:Name="TextBlock"></TextBlock>
</Grid>
</TabItem>
</TabControl>
First option
Then you can access children of removed TabItem using this code
private void tabControl_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
if (e.RemovedItems.Count != 0)
{
var tabItem = (TabItem)e.RemovedItems[0];
var content = (Grid)tabItem.Content;
var textBox = content.Children.OfType<TextBox>().First();
var text = textBox.Text;
}
}
Second option
You can name your textbox
<TextBox x:Name="TextBoxInFirstTab" Width="100" Height="23"></TextBox>
And access it using his name
var text2 = TextBoxInFirstTab.Text;
Third option
Use MVVM, check this answer MVVM: Tutorial from start to finish?
I am going to provide a simple sample, without any framework, but I suggest you to use anyone, like MVVM Light ToolKit.
Create a View Model
Implement the INotifyPropertyChanged interface
Create a property that will hold your text value, and in the set call the OnPropertyChanged
public class MyViewModel : INotifyPropertyChanged
{
private string _textInFirstTab;
public string TextInFirstTab
{
get { return _textInFirstTab; }
set
{
_textInFirstTab = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Then in your Window constructor, set the DataContext property from Window, to a new instance for your MyViewModel.
public MainWindow()
{
InitializeComponent();
this.DataContext = new MyViewModel();
}
Then in your XAML set the Text attribute with a Binding expression
<TextBox x:Name="TextBox" Width="100" Height="23" Text="{Binding TextInFirstTab}"></TextBox>
And in your tabControl_SelectionChanged event, you can access the value like that:
private void tabControl_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
if (e.RemovedItems.Count != 0)
{
var myViewModel = (MyViewModel)DataContext;
var text = myViewModel.TextInFirstTab;
}
}

If it is switching between existing tabs which you are after, then I would suggest simply storing the index of the selected tab in a class variable.
Sample code looks like this:
namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
// variable to store index of tab which was most recently selected
private int lastSelectedTabIndex = -1;
public Form1()
{
InitializeComponent();
// initialise the last selected index
lastSelectedTabIndex = tabControl1.SelectedIndex;
}
private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
{
// sanity check: if something went wrong, don't try and display non-existent tab data
if (lastSelectedTabIndex > -1)
{
MessageBox.Show(string.Format("Previous tab: {0} - {1}", lastSelectedTabIndex, tabControl1.TabPages[lastSelectedTabIndex].Text));
}
// store this tab as the one which was most recently selected
lastSelectedTabIndex = tabControl1.SelectedIndex;
}
}
}
This was written and tested in a simple application with one form and a TabControl added. No changes were made to the default properties.
You will, of course, have to hook into the event handler. I did so by double-clicking it in the IDE, but you could also hook in manually by adding:
this.tabControl1.SelectedIndexChanged += new System.EventHandler(this.tabControl1_SelectedIndexChanged);
to the form constructor, called "Form1()" in the example code.
Getting the name of a textbox is an unusual thing to want to do. May I ask what you are trying to achieve? There's probably a better way to do it than trying to determine the name of a control.

Routed Tunnel Events in wpf

I have got a question to wpf community here.
I am kind of not able to understand Routing Tunnel Events. In my application, I have got a window which contains a tool bar.
Window also contains usercontrols. There are some controls in Tool bar like view which are used to Hide / unhide usercontrols (Views) like in Visual Studio.
I have custom routed tunnel event in windows control. I raise custom event when a button is clicked on toolbar (hide / unhide). I need to hide a expander in child usercontrol (which has a name like "Expander 1") when button is clicked.
Can some one tell me how can I capture the raised event in the child user control?
Thanks.
Code window :
public partial class MainWindow : Window
{
private static readonly RoutedEvent HideShowMitigationEvent;
static MainWindow()
{
HideShowMitigationEvent = EventManager.RegisterRoutedEvent("HideShowMitigation",
RoutingStrategy.Tunnel, typeof(RoutedEventHandler), typeof(MainWindow));
}
public MainWindow()
{
InitializeComponent();
}
// The Standard .Net optional event wrapper
// This is required if we want to register the event handler in XAML
public event RoutedEventHandler HideShowMitigation
{
add { AddHandler(HideShowMitigationEvent, value); }
remove { RemoveHandler(HideShowMitigationEvent, value); }
}
// Raise the event. overidden from UIElement
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
// RaiseEvent(new RoutedEventArgs(HideShowMitigationEvent, this));
}
public static ExploredRisks _rootName { get; set; }
public MainWindow(GeneralTree<string> rawTreeData, Excel.Worksheet sheet,Excel.Workbook Wb)
{
//prepares the visual tree for other views
PrepareVisualTree visualTree = new PrepareVisualTree(rawTreeData, sheet);
_rootName = visualTree.getVisualTree();
var l_vm = new MainViewModel();
l_vm.Load(_rootName);
TreeListViewMultiColumned view = new TreeListViewMultiColumned( RiskViewModel.CreateTestModel(visualTree.getVisualTree()),sheet,Wb);
base.DataContext = l_vm;
InitializeComponent();
}
private void UIPanel_Loaded(object sender, RoutedEventArgs e)
{
}
private void RibbonCheckBox_Checked(object sender, RoutedEventArgs e)
{
RaiseEvent(new RoutedEventArgs(HideShowMitigationEvent, this));
}
private void SimpleClickEventHandlingCode(object sender, RoutedEventArgs e)
{
//Expander exp = ((MainWindow)(e.OriginalSource)).RiskProperties.MitigationArea;
RoutedEventArgs args = new RoutedEventArgs();
args.RoutedEvent = HideShowMitigationEvent;
RaiseEvent(args);
}
}
}
Window Xaml:
<Window>
<Ribbon x:Name="RibbonWin" SelectedIndex="0">
<RibbonTab Header="Views" KeyTip="H">
<!-- Home group-->
<RibbonGroup x:Name="ViewsGroup" Header="Views">
<RibbonCheckBox Label="Mitigation" IsChecked="{Binding IsChecked, Mode=TwoWay}" Checked="RibbonCheckBox_Checked" PreviewMouseDown="SimpleClickEventHandlingCode"/>
<RibbonCheckBox Label="Properties" IsChecked="{Binding IsChecked, Mode=TwoWay}" Checked="RibbonCheckBox_Checked" />
</RibbonGroup>
</RibbonTab>
</Ribbon>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<UI:TreeListViewMultiColumned x:Name="RiskProperties" Grid.Column="0" />
</Grid>
</Window>

I think I have to to clarify on WPF Routed Events before I suggest a solution:
In WPF there is a new concept of Routed Events. Routed Events are Events that are passed along the logical tree.
Example:
Lets look at what happens when you click a button on your UI.
First, you will get a PreviewLeftMouseButtonDown event that occurs on the MainWindow and is then passed down the element tree from parent to child until it reaches the button that has been clicked.
-> This process (from parent to child) is called Tunneling
Second, you will get a LeftMouseButtonDown event that occurs on the button and is passed up the element tree until it reaches the MainWindow.
-> This process (from child to parent) is called Bubbling
As far as I understand you want to open the expander on the click of the button.
IMHO using routed events for this is not the appropriate approach.
I think you can solve your use case with a little XAML. Here is what I suggest:
You use a ToggleButton in the Toolbar (this ensures that the user can
see the state of the button, e.g. pressed or not pressed.)
You use DataBinding to bind the ToggleButtons IsChecked Property to the
Expanders IsExpanded property.
Check the following (highly simplified) sample:
<Grid>
<StackPanel>
<ToggleButton x:Name="openExpanderBtn" Width="100" Height="30" Margin="20" Content="Click to Open" />
<Expander Width="150" Height="200" IsExpanded="{Binding ElementName=openExpanderBtn, Path=IsChecked}" >
<Expander.Header>
This is my Header
</Expander.Header>
This is my Body
</Expander>
</StackPanel>
Remark: It just came to my mind that this only works if the UserControl is under your control. If this is the case: fine, else I will describe another solution.
Rgds MM

Button listener on a user control

Here's the problem:
I have a 'home button' with a listener
private void Item_Tap(object sender, TappedRoutedEventArgs e)
{
if (this.Frame != null)
{
this.Frame.Navigate(typeof(Home));
}
}
If I built a User Control, using the 'home button' inside it, how can I accomplish the same navigation?
** I'm near to the solution**.
This is the user control:
public sealed partial class TopBarControl : UserControl
{
public Frame Frame { get; set; }
public object Parameter { get; set; }
public TopBarControl(Frame frame)
{
this.InitializeComponent();
this.Frame = frame;
var localSettings = Windows.Storage.ApplicationData.Current.LocalSettings;
var dateAndTime = DateTime.Now;
Date.Text = dateAndTime.Date.ToString("MM/dd/yyyy");
User.Text = localSettings.Values["userName"].ToString();
//SectionTitle.Text = Parameter.ToString();
}
private void GoHome_Tap(object sender, TappedRoutedEventArgs e)
{
if (this.Frame != null)
{
this.Frame.Navigate(typeof(Main_Menu));
}
}
}
on the xaml user control I have:
<Button Grid.Column="0" HorizontalAlignment="Right" BorderThickness="0">
<Image Source="/Assets/home_icon.png" Tapped="GoHome_Tap"/>
</Button>
Page associated to the user control
public WantedVehicles()
{
this.InitializeComponent();
}
private TopBarControl topBarControl;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Tit.Text = e.Parameter.ToString();
topBarControl.Frame = this.Frame;
topBarControl.Parameter = e.Parameter;
}
protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
}
protected override void SaveState(Dictionary<String, Object> pageState)
{
}
But the button doesn't work yet.

I understand your problem. Here's a simple way to create a home button that you can add anywhere in your application and it will navigate home. No need to cascade events or anything like that. Just create a custom control. This is different than a user control. This is just sub-classing the button control. Far more clean an approach.
Three easy steps.
Note: My custom control is going to be called HomeButton and my home page class is going to be called HomePage. Other than that, this should all be out-of-the-box for you.
First, define how your button will look:
<!-- custom home button -->
<Style TargetType="local:HomeButton" BasedOn="{StaticResource BackButtonStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="48" Width="48">
<Ellipse Stroke="White" StrokeThickness="2" />
<TextBlock Text="" FontSize="20"
VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Second, define your custom control like this:
public sealed class HomeButton : Button
{
public HomeButton()
{
this.DefaultStyleKey = this.GetType();
this.Click += HomeButton_Click;
}
void HomeButton_Click(object sender, RoutedEventArgs e)
{
var _Frame = Window.Current.Content as Frame;
var _Type = typeof(HomePage);
_Frame.Navigate(_Type);
}
}
Third, and finally, add your home button to your app!
<local:HomeButton HorizontalAlignment="Left" VerticalAlignment="Top" Margin="40" />
Here's how it looks:
It even works! :) If you want to style the button more, it will be easy to steal the styling of the BackButtonStyle in your /Common/StandardStyles.xaml file. Then you can have the same View States and all. Anyway, this will get you where you want.
So, this is home button that solves the problem you described in your question. It even solves it in a way that is less problematic than the solution you assumed you would get - since manually bubbling events across contexts can cause nightmares.
I hope this helps.

Add a button to your user control, and attach Item_Tap event handler to it.
<UserControl>
....
<Button Tapped="GoHome_Tap">Go Home</Button>
.....
</UserControl>
Add Frame to MyUserControl.cs. See your other question to know how to set the Frame property from enclosing Page.
public TopBarControl:UserControl
{
public Frame Frame {get;set;} // To be set in either OnNavigatedTo, or in Constructor.
}
Add Event Handler to MyUserControl.cs
private void GoHome_Tap(object sender, TappedRoutedEventArgs e)
{
if (this.Frame != null)
{
this.Frame.Navigate(typeof(Home));
}
}

You have to add an event to your UserControl that is fired in the button's event handler. The event that you posted above would still be defined outside of your user control unless you passed whatever "this" was into the UserControl's constructor.