Sorry if this has been asked before and I have spent about a week trying to find a similar question to point me in the right direction. I am teaching myself C# with WPF, XAML etc and am playing around with user controls. I made a simple app with a user control to load on top of other windows or user controls. The UC in question has two buttons and I need to get to the click events for each button in main window once the control is loaded. The main window has a button that loads the control.
Through some research I was able to find a solution from user SWilko (https://stackoverflow.com/a/28949666/10659981) but I can't figure it out for each button separately (click button a and show "clicked btn a", click button b and show "clicked button b"). I did try calling by sender using name and that will not work either. I feel like I am close with the help from the answer by SWilko but stuck.
Here is the code so far:
Basic main screen loading user control
<Window x:Class="UCBTN_TEST.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:UCBTN_TEST"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="435">
<Grid>
<Button Content="Load Button" HorizontalAlignment="Left" Margin="18,23,0,0" VerticalAlignment="Top" Width="74" Click="Button_Click"/>
<Grid x:Name="GridLoad" HorizontalAlignment="Left" Height="300" Margin="120,23,0,0" VerticalAlignment="Top" Width="300" Background="#FFF1CBCB"/>
</Grid>
</Window>
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 UCBTN_TEST
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
GridLoad.Children.Clear();
GridLoad.Children.Add(new WindowControl());
}
}
}
The button user control
<UserControl x:Name="UCMain" x:Class="UCBTN_TEST.Controls.ButtonControl"
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:UCBTN_TEST.Controls"
mc:Ignorable="d" d:DesignWidth="300" Height="40.333">
<Grid Background="#FFE7EEA7">
<Button x:Name="ButtonA" Content="Button A" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonA_Click" Background="Red"/>
<Button x:Name="ButtonB" Content="Button B" HorizontalAlignment="Left" Margin="215,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonA_Click" Background="Green"/>
</Grid>
</UserControl>
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace UCBTN_TEST.Controls
{
/// <summary>
/// Interaction logic for ButtonControl.xaml
/// </summary>
public partial class ButtonControl : UserControl
{
public ButtonControl()
{
InitializeComponent();
}
private void ButtonA_Click(object sender, RoutedEventArgs e)
{
RaiseEvent(new RoutedEventArgs(ClickEvent1, this));
}
public static readonly RoutedEvent ClickEvent1 = EventManager.RegisterRoutedEvent("Click", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(ButtonControl));
public event RoutedEventHandler Click
{
add { AddHandler(ClickEvent1, value); }
remove { RemoveHandler(ClickEvent1, value); }
}
}
}
A second user control which would ultimately have some other controls once the buttons work correctly. But the button UC will load on top, simple button features related to WindowControl.
<UserControl
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:UCBTN_TEST"
xmlns:Controls="clr-namespace:UCBTN_TEST.Controls" x:Class="UCBTN_TEST.WindowControl"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Background="#FFE7CFEE">
<Controls:ButtonControl HorizontalAlignment="Left" Height="37" VerticalAlignment="Top" Width="300" Click="Click1"/>
</Grid>
</UserControl>
I understand the behind code and why this is happening. My problem is that I need to have the buttons be unique in their events. I have tried calling by sender and name and that just kills the event all together.
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using UCBTN_TEST.Controls;
namespace UCBTN_TEST
{
/// <summary>
/// Interaction logic for WindowControl.xaml
/// </summary>
public partial class WindowControl : UserControl
{
public WindowControl()
{
InitializeComponent();
}
private void Click1(object sender, RoutedEventArgs e)
{
MessageBox.Show("This triggers both");
}
}
}
I was going to add a bunch of comments but really this is kind of answering the question and there's a lot to explain.
You should look into MVVM and mostly be thinking in terms of binding commands rather than which button was clicked. There are exceptions to this. For example, if you were building an on screen keyboard. The reason this is different because it's purpose can be encapsulated. The user presses a button which has "A" in it. Whatever textbox is focussed should be sent the character "A". They press a button showing "B" and similarly "B" should be sent. That functionality can be encapsulated in the control.
As it is, you have two buttons.
You put them in a usercontrol and encapsulate them.
By doing this you created a boundary.
This then creates a complication - which was clicked?
The usercontrol is also not particularly re-use friendly. If you add two then there are two buttonA and two button B. You could potentially improve that with a custom event args on your custom routed event and a dependency property on your usercontrol. Pass some usercontrol identifier along with which button was pressed.
This would be an unusual way to work though. I've rarely seen Custom routed events used in commercial apps.
All in all I would suggest the usercontrol mainly adds complexity.
Say you wanted to have 20 sets of 2 buttons.
Or 20 sets of 5 radiobuttons for a set of multiple choice questions.
The way to do that sort of thing is to use an itemscontrol and template out the multiple controls. One template giving 2 buttons ( or a textblock question and 5 radiobuttons for answers ) per row.
A click event is already a routed event and would bubble to the window. You may as well remove your custom routed event and the handler out the usercontrol... and the usercontrol. Just handle click in the window.
Code:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
var btn = e.OriginalSource as Button;
if(btn == null)
{
return;
}
MessageBox.Show($"Button clicked was {btn.Tag}");
}
Markup:
ButtonBase.Click="Button_Click"
Title="MainWindow"
>
<Grid>
<StackPanel>
<Button x:Name="ButtonA" Content="Button A" Tag="A" Background="Red"/>
<Button x:Name="ButtonB" Content="Button B" Tag="B" Background="Green"/>
</StackPanel>
</Grid>
</Window>
Related
I have noticed in my WPF application a strange behavior. If I edit or remove a text in any text box and try to click afterwards on a canvas, the first MouseLeftButtonDown event is often swallowed. If I try a second time, it works.
For demonstrating the problem, I have created a minimalist demo.
XAML:
<Window x:Class="WPF_Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Click Demo" Height="300" Width="400">
<Grid>
<TextBox x:Name="textBox" Margin="10,10,10,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
<Canvas Margin="10,38,10,10" MouseLeftButtonDown="Click" Background="Black"/>
</Grid>
</Window>
C#:
using System.Windows;
using System.Windows.Input;
namespace WPF_Demo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Click(object sender, MouseButtonEventArgs e)
{
System.Diagnostics.Trace.WriteLine("Click!");
}
}
}
Edit:
Seems to be a problem of my Windows. I can reproduce it even with Explorer.
Foreword: I'm posting this here as I didn't get any replies to my post here: https://social.msdn.microsoft.com/Forums/vstudio/en-US/5d7d4554-7d4b-45af-b02c-22ed0c7695a2/navigation-in-c-xaml-not-working?forum=vsta
I know Stackoverflow is a much more reliable source, so I decided to repost it here.
I'm trying to make make my first app in VS, and I want it to just be an informational App about cubing (Solving Rubik's style cubes very fast.) I am just learning the basics of C# and XAML at the moment, but am unable to get navigation between pages. All tutorials I have seen say use the line of code:
this.Frame.Navigate(typeof(PLL), null);
But it gives me this error:
'Mainwindow' does not contain a definition for 'Frame' and no extension method 'Frame' accepting a first argument of type 'MainWindow' could be found (are you missing a using directive or an assembly reference?
I also want to point out that they say to use the 'Blank App' Template, but I can't seem to find that - is it not in VS community? Instead, I had to use the WPF app template.
What am I doing wrong? How can I get these links between pages working?
Below is the whole of my C# and XAML code.
Thanks!
C#:
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 CubingGuide
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void GoToPLL(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(PLL), null);
}
}
}
XAML:
<Window x:Class="CubingGuide.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:CubingGuide"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button x:Name="GoToPLLButt" Margin="10,10,360,251" Content="PLL" Click="GoToPLL"/>
</Grid>
</Window>
You need to create Frame object in XAML if you want to navigate to the Frame(i.e. you need to populate the frame with your "PLL").
you need a Frame control in MainPage.xaml
<Window x:Class="WpfApplication1.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:WpfApplication1"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=PresentationFramework"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="60" Margin="64,89,0,0" VerticalAlignment="Top" Width="135" Click="button_Click"/>
<Controls:Frame Name="MainFrame" NavigationUIVisibility="Hidden" >
</Controls:Frame>
</Grid>
</Window>
On click event you just need to add this code:
private void button_Click(object sender, RoutedEventArgs e)
{
MainFrame.Navigate(new Page1());
}
I hope this helps :)
<Custom:Ribbon x:Name="ribbon" HorizontalAlignment="Left" Margin="0,10,0,0" VerticalAlignment="Top" Width="934">
<Custom:Ribbon.QuickAccessToolBar>
<Custom:RibbonQuickAccessToolBar>
<Custom:RibbonQuickAccessToolBar>
<Custom:RibbonSplitMenuItem Header="مرحله سوم"/>
</Custom:RibbonQuickAccessToolBar>
</Custom:Ribbon>
</Grid>
I am trying to change the Opacity of the main application window through a settings window popup in real time. What is the proper way of doing this?
So far, I have tried using a Slider to output the value to the settings file. When the settings popup is closed, the main window refreshes its opacity property based on the settings file. This method works but I'd like the ability to change the opacity and view the result in real time.
The second method I tried was using a Style and applying it to the MainWindow. Then on slider move, the style would be overridden with the value from the slider. This works in real time. But for whatever reason, the settings popup window opacity is also affected even though no style is applied to it.
Here is a sample project named OpacityTest with a main window, a button to open settings popup and slider to control the program's opacity.
App.xaml:
<Application x:Class="OpacityTest.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="Window" x:Key="wrapper">
<Setter Property="OverridesDefaultStyle" Value="false"/>
<Setter x:Name="opacitySetter" Property="Opacity" Value="1"/>
</Style>
</Application.Resources>
</Application>
MainWindow.xaml:
<Window x:Class="OpacityTest.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" Style="{DynamicResource wrapper}" Background="#FFCDCDCD" AllowsTransparency="True" WindowStyle="None">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Content="Settings" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Click="Button_Click"/>
</StackPanel>
</Grid>
</Window>
New window labeled Settings, Settings.xaml:
<Window x:Class="OpacityTest.Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Settings" Height="300" Width="300">
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Slider x:Name="ChangeTransparency" MinWidth="138" MinHeight="22" VerticalAlignment="Center" Padding="0" Orientation="Horizontal" HorizontalAlignment="Center" Value="1" Minimum=".05" Maximum="1" LargeChange=".01" SmallChange=".01" TickFrequency="100" IsSnapToTickEnabled="False" MouseMove="ChangeTransparency_MouseMove"/>
</StackPanel>
</Grid>
</Window>
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 OpacityTest
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Settings settings = new Settings();
settings.ShowDialog();
}
}
}
Settings.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.Shapes;
namespace OpacityTest
{
/// <summary>
/// Interaction logic for Settings.xaml
/// </summary>
public partial class Settings : Window
{
public Settings()
{
InitializeComponent();
}
private void ChangeTransparency_MouseMove(object sender, MouseEventArgs e)
{
Style style = new Style { TargetType = typeof(Window) };
style.Setters.Add(new Setter(OpacityProperty, Opacity = ChangeTransparency.Value));
Application.Current.Resources["wrapper"] = style;
}
}
}
It looks like your Style is behaving as if it were declared in a XAML file in a way that affects all Windows, not just the wrapper style, e.g.
<Style TargetType="Window"> ... </Style>
Instead of:
<Style TargetType="Window" x:Key="wrapper"> ... </Style>
I'm not immediately sure of how to declare it the way you're trying to, but a much easier way to accomplish what you're trying to do is to put this in MainWindow.xaml.cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
Settings settings = new Settings();
this.SetBinding(OpacityProperty,
new Binding("Value") { Source = settings.ChangeTransparency });
settings.ShowDialog();
}
No handler on ChangeTransparency is required this way. The only reason I might consider modifying the Style instead is if you can have multiple MainWindows at once, and want one Settings window (opened from any of them) to control them all at once.
As an aside, if you do find that you need to attach to ChangeTransparency, you should attach a handler to its ValueChanged event instead of MouseMove (while MouseMove will generally work out, it's really not the same; e.g. for keyboard input, only ValueChanged will fire).
If Settings can be used from other windows and/or has more properties, you might wish to change Settings to take a Window (or other type) in its constructor, and set up the binding(s) there instead, to keep your code/logic centralized and clean.
I wish to set focus on a TextBox after an item is selected from a ListView control, but I can't seem to get it to focus from within my 'SelectionChanged' event method FocusOnTextBox().
For some reason the ListView always has focus after a selection is made.
I have created a Visual Studio application to demonstrate this problem:
http://maq.co/focusapp.zip
How can I get the focus to return to the TextBox from within my 'SelectionChanged' event method?
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>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListView Name="list_view1" Grid.Column="0" SelectionChanged="FocusOnTextBox">
<ListViewItem Content="1" />
<ListViewItem Content="2" />
<ListViewItem Content="3" />
</ListView>
<TextBox Name="text_box1" Grid.Column="1" Text="When a selection is chosen from the left hand side ListView, I want THIS word to be selected and for the focus to change to this text box - this will show the selection to the user.
However, right now it doesn't seem to work, the focus remains on the ListView regardless of it being set to Focus() in the FocusOnTextBox() method, which is fired on the 'SelectionChanged' event." TextWrapping="Wrap" />
</Grid>
</Window>
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 WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// Test that the selection of the word THIS and the Focus() works
text_box1.SelectionStart = 68;
text_box1.SelectionLength = 4;
text_box1.Focus();
}
private void FocusOnTextBox(object sender, SelectionChangedEventArgs e)
{
MessageBox.Show("FocusOnTextBox fired on selection with list view");
text_box1.SelectionStart = 68;
text_box1.SelectionLength = 4;
text_box1.Focus();
}
}
}
I believe this happens because the ListView is not finished changing the selection, and so you switching focus from within the SelectionChanged event handler doesn't stick because after you've changed focus, the ListView changes it back in order to complete its selection change flow.
If you put a breakpoint in the FocusOnTextBox function and look at the Call Stack, you'll see that you're pretty deep into the stack, and there is a lot that the ListView will do after your FocusOnTextBox function executes. I imagine one of the things it will do is set focus to the selected item in the ListView.
If you change it so that you're shifting focus after the ListView has completed changing the current selection, it should work. For example, changing it so you switch focus in the MouseLeftButtonUp seems to work:
<ListView Name="list_view1" Grid.Column="0" MouseLeftButtonUp="FocusOnTextBox">
<ListViewItem Content="1" />
<ListViewItem Content="2" />
<ListViewItem Content="3" />
</ListView>
And then you'll need to change the FocusOnTextBox event handler definition to use MouseEventArgs rather than SelectionChangedEventArgs as well.
I have Page, and it loses focus when I tap on an empty part of it. I tried putting a Border as the background, but that loses focus too when I tap it. Why does this happen?
What I really need to do is disable a WebView when the user opens the AppBar or the Settings Charm
Some example code to demonstrate the problem (watch the output window):
XAML:
<Page
x:Name="Pagey"
x:Class="FocusTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FocusTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" GotFocus="Focus" LostFocus="LoseFocus">
<Grid x:Name="RootGrid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" GotFocus="Focus" LostFocus="LoseFocus">
<StackPanel>
<Button x:Name="Clicky" Content="Clicky" GotFocus="Focus" LostFocus="LoseFocus" HorizontalAlignment="Center"></Button>
<Border x:Name="Border" Width="100" Height="100" Background="Red" GotFocus="Focus" LostFocus="LoseFocus"></Border>
<Button x:Name="Clicky2" Content="Clicky2" GotFocus="Focus" LostFocus="LoseFocus" HorizontalAlignment="Center"></Button>
</StackPanel>
</Grid>
</Page>
Code behind:
using System.Diagnostics;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace FocusTest
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
void Focus(object sender, RoutedEventArgs e)
{
Debug.WriteLine("Focus({0})", (sender as FrameworkElement).Name);
}
void LoseFocus(object sender, RoutedEventArgs e)
{
Debug.WriteLine("LoseFocus({0})", (sender as FrameworkElement).Name);
}
}
}
Look like your Border is inside the RootGrid So that every time when you tap Border's tap event will occur and LostFocus Event fired. Better you can set LostFocus event on the same RootGrid. Then it may work fine. Please try it.
Thanks.