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.
Related
How to add an UI controller to all pages of the app? For example, having the same SplitView controller with navigation menu in Pane on all pages without copying its xaml code? Or maybe changing App.xaml in some way?
Or, as a second option, is it possible to create a UserControl that contains SplitView and put all other views on this page inside it Content? I mean, how to put views into the UserControl in xaml (or even in code)?
Create custom RootControl which derives from UserControl class and which contains the root Frame
<SplitView DisplayMode="CompactOverlay">
<SplitView.Pane>
<StackPanel>
<AppBarButton Icon="Home"
Width="50"
MinWidth="50"
Click="OnHomeClicked"
/>
<AppBarButton Icon="Shop"
Width="50"
MinWidth="50"
Click="OnShopClicked"/>
<AppBarButton Icon="Setting"
MinWidth="50"
Width="50"
Click="OnSettingsClicked"/>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Frame x:Name="rootFrame"/>
<!--Put your hamburger button here-->
</Grid>
</SplitView.Content>
</SplitView>
Rewrite OnLauched:
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
var rootControl = Window.Current.Content as RootControl;
if (rootControl == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootControl = new RootControl();
rootControl.RootFrame.NavigationFailed += OnNavigationFailed;
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = rootControl;
}
if (rootControl.RootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
rootControl.RootFrame.Navigate(typeof(MainPage), e.Arguments);
}
// Ensure the current window is active
Window.Current.Activate();
}
and you can manage you actions from code-behind or ViewModel for navigation and other actions
public sealed partial class RootControl : UserControl
{
private Type currentPage;
public RootControl()
{
this.InitializeComponent();
RootFrame.Navigated += OnNavigated;
}
private void OnNavigated(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
currentPage = e.SourcePageType;
}
public Frame RootFrame
{
get
{
return rootFrame;
}
}
private void OnHomeClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
Navigate(typeof(MainPage));
}
private void OnShopClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
Navigate(typeof(StorePage));
}
private void OnSettingsClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
Navigate(typeof(SettingsPage));
}
private void Navigate(Type pageSourceType)
{
if (currentPage != pageSourceType)
{
RootFrame.Navigate(pageSourceType);
}
}
}
Download the sample and look how it works
It sounds like you're after something like what Jerry Nixon suggests in this article here.
The essential idea is that instead of a Frame control hosting all of your app's content, you create a "Shell" (in the article's case, made of a SplitView, but really, it could probably be anything), which has some content of its own, as well as a Frame control (which then hosts the rest of your content).
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.
If I change StaysOpen to "True", the popup shows up, but it doesn't close when you click outside of it, so that's not what I want.
Here is the relevant XAML code:
<Border x:Name="popupPlacementTarget">
<i:Interaction.Behaviors>
<local:PopupBehavior>
<local:PopupBehavior.Popup>
<Popup PlacementTarget="{Binding ElementName=popupPlacementTarget}"
Placement="MousePoint"
StaysOpen="False">
<ContentPresenter Content="{Binding SomeContent}" ContentTemplate="{StaticResource SomeContentTemplate}" />
</Popup>
<local:PopupBehavior.Popup>
</local:PopupBehavior>
</i:Interaction.Behaviors>
</Border>
And here is the PopupBehavior code:
public class PopupBehavior : Behavior<UIElement>
{
#region Dependency Properties
public static readonly DependencyProperty PopupProperty = DependencyProperty.Register(
"Popup", typeof(Popup), typeof(PopupBehavior), new FrameworkPropertyMetadata(default(Popup)));
#endregion Dependency Properties
#region Properties
public Popup Popup
{
get { return (Popup)this.GetValue(PopupProperty); }
set { this.SetValue(PopupProperty, value); }
}
#endregion Properties
#region Protected Methods
protected override void OnAttached()
{
base.OnAttached();
this.AssociatedObject.MouseDown += this.OnMouseDown;
}
protected override void OnDetaching()
{
base.OnDetaching();
this.AssociatedObject.MouseDown -= this.OnMouseDown;
}
#endregion Protected Methods
#region Private Methods
private void OnMouseDown(object sender, MouseButtonEventArgs eventArgs)
{
var popup = this.Popup;
if (popup == null)
{
return;
}
this.Popup.IsOpen = true;
}
#endregion Private Methods
}
Any idea why my popup won't show up with StaysOpen="False"?
It turns out there was an ancestor that was indiscriminately grabbing capture on mouse down. Everything is working correctly now that I've corrected this issue.
As an aside, I was able to hack around this problem by setting StaysOpen="True", inheriting Popup, and hooking in to the global mouse events within the derived Popup. When the popup opens, I'd attach the handler to the global input events. Then, when an event is received, I'd filter it such that I'm only responding to left mouse button down events. In handling this event, I'd close the popup and detach the event if the mouse is not hovering the popup. It worked, but it is obviously a dirty hack, and I'm happy that I got this working without it.
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
I was faced with the next misunderstanding.
Preamble:
I have wpf application with next essential UI parts: RadioButtons and some control that use dropdown based on Popup (in combobox manner). According to some logic every radiobutton hook PreviewMouseDown event and do some calculations.
In the next scenario,
User opens popup (do not select something, popup just staying open)
User click on radiobutton
PreviewMouseDown will not be fired for radiobutton as expected (because of Popup feature).
And my aim is firing PreviewMouseDown for RadioButton despite of one.
Attempts to solve:
Fast and dirty solution is: hook PreviewMouseDown for Popup and re-fire PreviewMouseDown event with new source if required, using radiobutton as source. New source can be obtained via MouseButtonEventArgs.MouseDevice.DirectlyOver. The next piece of code do that (event is re-fired only if Popup "eat" PreviewMouseDown for outer click):
private static void GrantedPopupPreviewMouseDown(object sender, MouseButtonEventArgs e)
{
var popup = sender as Popup;
if(popup == null)
return;
var realSource = e.MouseDevice.DirectlyOver as FrameworkElement;
if(realSource == null || !realSource.IsLoaded)
return;
var parent = LayoutTreeHelper.GetParent<Popup>(realSource);
if(parent == null || !Equals(parent, popup ))
{
e.Handled = true;
var args = new MouseButtonEventArgs(e.MouseDevice,
e.Timestamp,
e.ChangedButton)
{
RoutedEvent = UIElement.PreviewMouseDownEvent,
Source = e.MouseDevice.DirectlyOver,
};
realSource.RaiseEvent(args);
}
}
This works well when I'm attaching that handler to Popup.PreviewMouseDown directly via Behavior and do not work (PreviewMouseDown isn't fired for radiobutton) if I'm attaching one via EventManager.RegisterClassHandler (aim is to avoid attaching behavior to every Popup that can occure on page with these radiobuttons):
EventManager.RegisterClassHandler(
typeof (Popup),
PreviewMouseDownEvent,
new MouseButtonEventHandler(GrantedPopupPreviewMouseDown));
Debugger showed that e.MouseDevice.DirectlyOver (see code above) is Popup, not Radiobutton (as it is was when I've attached handler via Behavior)!
Question:
How and whyMouseButtonEventArgs can be different for the same action, if eventhandler attached in two different ways?
Can someone explaing this behavior?
Thanks a lot.
The combo box is provided as a way for users to select from a group of options, and you likely want to do that. But it also has other contracts. It says that the user should be focused on this and only this task. But that is not your situation. You want to show the options, have them hide able, and allow the user to do other things while they are shown.
I think instead of combo boxes you want some other control. My suggestion is to use an expander that contains a listbox. Given:
class NotificationObject : INotifyPropertyChanged
{
public void RaisePropertyChanged(string name)
{
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
class ComboEntry : NotificationObject
{
public string Name { get; private set; }
private string _option = "Off";
public string Option
{
get { return _option; }
set { _option = value; RaisePropertyChanged("Option"); }
}
public ComboEntry()
{
Name = Guid.NewGuid().ToString();
}
}
class MyDataContext : NotificationObject
{
public ObservableCollection<ComboEntry> Entries { get; private set; }
private ComboEntry _selectedEntry;
public ComboEntry SelectedEntry
{
get { return _selectedEntry; }
set { _selectedEntry = value; RaisePropertyChanged("SelectedEntry"); }
}
public MyDataContext()
{
Entries = new ObservableCollection<ComboEntry>
{
new ComboEntry(),
new ComboEntry(),
new ComboEntry()
};
SelectedEntry = Entries.FirstOrDefault();
}
public void SetOption(string value)
{
Entries
.ToList()
.ForEach(entry => entry.Option = value);
}
}
I think you want the following XAML:
<Window x:Class="RadioInCombo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:RadioInCombo"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:MyDataContext x:Key="myDataContext" />
<DataTemplate x:Key="ComboEntryTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
<Border Width="5" />
<TextBlock Text="{Binding Option}" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<StackPanel DataContext="{StaticResource myDataContext}">
<RadioButton x:Name="OnButton"
Content="On"
PreviewMouseDown="OnButton_PreviewMouseDown" />
<RadioButton x:Name="OffButton"
Content="Off"
PreviewMouseDown="OffButton_PreviewMouseDown" />
<Expander Header="{Binding SelectedEntry}"
HeaderTemplate="{StaticResource ComboEntryTemplate}">
<ListBox ItemsSource="{Binding Entries}"
ItemTemplate="{StaticResource ComboEntryTemplate}" />
</Expander>
</StackPanel>
</Window>
And the following code-behind:
private MyDataContext GetMyDataContext()
{
var candidate = FindResource("myDataContext") as MyDataContext;
if (candidate == null) throw new ApplicationException("Could not locate the myDataContext object");
return candidate;
}
private void OnButton_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
GetMyDataContext().SetOption("On");
}
private void OffButton_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
GetMyDataContext().SetOption("Off");
}