The effect I want to achieve:
Left mouse button is held down.
Mouse moves.
Toggle any checkbox the mouse passes over.
Simple, right? ;-;
Thanks.
Not too hard.
Code Behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Checkbox_OnMouseEnter(object sender, MouseEventArgs e)
{
var checkbox = sender as CheckBox;
if (e.LeftButton == MouseButtonState.Pressed)
{
if (checkbox != null)
{
checkbox.IsChecked = !checkbox.IsChecked;
}
}
}
private void UIElement_OnGotMouseCapture(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
var checkbox = sender as CheckBox;
if (checkbox != null)
{
checkbox.IsChecked = !checkbox.IsChecked;
checkbox.ReleaseMouseCapture();
}
}
}
XAML
<Window x:Class="ClickAndDrag.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">
<StackPanel>
<CheckBox MouseEnter="Checkbox_OnMouseEnter" GotMouseCapture="UIElement_OnGotMouseCapture"/>
<CheckBox MouseEnter="Checkbox_OnMouseEnter" GotMouseCapture="UIElement_OnGotMouseCapture"/>
<CheckBox MouseEnter="Checkbox_OnMouseEnter" GotMouseCapture="UIElement_OnGotMouseCapture"/>
<CheckBox MouseEnter="Checkbox_OnMouseEnter" GotMouseCapture="UIElement_OnGotMouseCapture"/>
<CheckBox MouseEnter="Checkbox_OnMouseEnter" GotMouseCapture="UIElement_OnGotMouseCapture"/>
<CheckBox MouseEnter="Checkbox_OnMouseEnter" GotMouseCapture="UIElement_OnGotMouseCapture"/>
</StackPanel>
The reason for releasing the mouse capture is to prevent a checkbox from swallowing all the events when it is clicked.
Related
I have a Window with a Menu on it. When the Menu is opened, I would like to change the Window's appearance to look disabled. Simply covering it with a gray Rectangle looks nice. Here is the Window markup:
<Grid>
<!--Content-->
<ContentControl Content="{Binding CurrentViewModel}" />
<!--Container to hide content-->
<Rectangle x:Name="Disabler" Fill="#77000000" Visibility="{Binding DisableWindow, Converter={StaticResource BoolToVisibilityConverter}}" />
</Grid>
I tried to set DisableWindow to true when the Submenu opens and false when it closes. However, setting this value seems to close the Submenu. How can I ensure the Submenu stays open?
private void MenuItem_SubmenuOpened(object sender, RoutedEventArgs e)
{
MainWindowViewModel mainVM = Window.GetWindow(this).DataContext as MainWindowViewModel;
if (mainVM != null)
{
mainVM.DisableWindow = true;
}
}
Edit: Since the Rectangle gets set to Visible, the MouseUp event is happening on Disabler. This is why the Submenu closes on me. I tried setting IsHitTestVisible="False" on the Rectangle, but that makes everything under it clickable. Is there a way to keep the Rectangle from stealing focus?
Instead of overlapping the grid with Rectangle, I divided my 2 half.
Is the Menu bar (10 % of screen)
Rectangle area (90% of screen)
Xaml of the screen
<Window x:Class="WpfApp4.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:WpfApp4"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d" x:Name="Window1"
Title="MainWindow" Height="450" Width="800">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border>
<Border.Effect>
<BlurEffect Radius="{Binding ElementName=Window1,Path=DataContext.Radius}" KernelType="Gaussian"/>
</Border.Effect>
<Menu Grid.Row="0" x:Name="Menubar" HorizontalAlignment="Left" Height="24" Margin="10,10,0,0" VerticalAlignment="Top" Width="772" >
<MenuItem Header="Home" SubmenuOpened="MenuItem_SubmenuOpened" SubmenuClosed="MenuItem_SubmenuClosed" >
<MenuItem Header="Office" >
<MenuItem Header="Ground Floor"/>
</MenuItem>
<MenuItem Header="Exit" />
</MenuItem>
</Menu>
</Border>
<Rectangle Grid.Row="1" x:Name="Disabler" Fill="{Binding ElementName=Window1, Path=DataContext.BackGroundColor}" />
</Grid>
As you can see in the Xaml, I have used 2 events SubmenuOpened and SubmenuClosed.
These 2 Methods are responsible to flip the rectangle fill Brush color.
In ViewModel/CodeBehind, I have created 1 property called BackGroundColor, which will be having white color when menu is not clicked and will have grey if we click on Menu.
BackGroundColor will be binded with the Rectangle's Fill property.
Code Behind
public partial class MainWindow : Window,INotifyPropertyChanged
{
private Brush _backGroundcolor;
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public int _radius { get; set; }
public int Radius
{
get
{
return _radius;
}
set
{
_radius = value;
NotifyPropertyChanged(nameof(Radius));
}
}
public Brush BackGroundColor
{
get
{
return _backGroundcolor;
}
set
{
_backGroundcolor = value;
NotifyPropertyChanged(nameof(BackGroundColor));
}
}
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
private void MenuItem_SubmenuOpened(object sender, RoutedEventArgs e)
{
BackGroundColor = new SolidColorBrush(Colors.Gray);
Radius = 5;
}
private void MenuItem_SubmenuClosed(object sender, RoutedEventArgs e)
{
BackGroundColor = new SolidColorBrush(Colors.White);
Radius = 0;
}
}
Check out the Menu clicked image below.
I had to go with setting IsHitTestVisible="False" on the Rectangle, even though that makes everything under it clickable. It's a hack, and I would love a better fix.
TextBlock has KeyDown and KeyUp event, but it's never fired. Is there a way to make it happen? I just need to detect if any key is pressed.
First of all you will need to set the Focusable Property of your TextBlock to True, This will allow you to Tab to the Item but not Click to select it, but if you handle the MouseDown Event you can manualy set Focus to your TextBlock.
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 >
<TextBlock Name="tb1" Height="30" Width ="100" IsEnabled="True" Focusable="True" KeyDown="tb1_KeyDown" MouseDown="tb1_MouseDown">Hello World</TextBlock>
</Grid>
</Window>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void tb1_KeyDown(object sender, KeyEventArgs e)
{
tb1.Background = Brushes.Blue;
}
private void button1_Click(object sender, RoutedEventArgs e)
{
tb1.Focus();
}
private void tb1_MouseDown(object sender, MouseButtonEventArgs e)
{
tb1.Focus();
}
}
I'm working in WPF and i have an interesting requirement.
I need my checkboxes to be ThreeState, so if only some of the child elements are selected it shows as indeterminate. But when a use clicks it, i want it to select either true or false.
Here is a story to represent my requirements:
item - indeterminate
subItem - checked
subItem - unchecked
subItem - checked
When a user clicks item, the checkbox should alternate between checked and unchecked. The user should never be able to select 'indeterminate' as a state. Is this possible?
XAML:
<CheckBox IsThreeState="True" IsChecked="{x:Null}" Click="CheckBox_Clicked" />
Code-behind:
private void CheckBox_Clicked(object sender, RoutedEventArgs e)
{
var cb = e.Source as CheckBox;
if (!cb.IsChecked.HasValue)
cb.IsChecked = false;
}
If you don't like the code-behind solution, then you could sub-class your own control like in the solution for this question.
It's much easier if you use Binding with your CheckBox.
XAML:
<Window x:Class="WpfApplication39Checkbox.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>
<CheckBox Content="CheckBox" HorizontalAlignment="Left" Margin="128,95,0,0" VerticalAlignment="Top" IsThreeState="False" IsChecked="{Binding CheckState}"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="46,241,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="139,241,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="235,241,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_2"/>
</Grid>
</Window>
Code-behind:
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
namespace WpfApplication39Checkbox
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
private bool? checkState;
public bool? CheckState
{
get { return checkState; }
set
{
checkState = value;
OnPropertyChanged("CheckState");
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
CheckState = false;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
CheckState = true;
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
CheckState = null;
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
You see the point? You set the CheckBox to IsThreeState="False" but set the third state from CodeBehind and the CheckBox behaves as expected.
In WPF MVVM environment, I'm trying to ensure that focus is given to a TextBox. What happens is that the Cursor appears in the TextBox but is not flashing and the TextBox does not have focus. The code is:
I have a Popup containing this UserControl:
<UserControl x:Class="Rendevous.BusinessModules.AdministrationModule.LogonView"
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="100" d:DesignWidth="300"
xmlns:my="clr-namespace:Csla.Xaml;assembly=Csla.Xaml"
xmlns:ViewModels="clr-namespace:Rendevous.Common.ViewModels;assembly=Common"
Visibility="{Binding Path=IsViewVisible}"
FocusManager.FocusedElement="{Binding Path=passCodeTextBox}"
ViewModels:FocusExtension.IsFocused="{Binding IsPassCodeFocused}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="Pass Code:"
VerticalAlignment="Center" />
<TextBox Grid.Column="1" Name="passCodeTextBox" Width="100"
VerticalAlignment="Center"
Margin="3"
Text="{Binding Path=PassCode, UpdateSourceTrigger=PropertyChanged}"
ViewModels:FocusExtension.IsFocused="{Binding IsPassCodeFocused}" />
<Button Grid.Column="2" VerticalAlignment="Center" Margin="3" Name="loginButton"
Content="Log In" />
<Button Grid.Column="3"
VerticalAlignment="Center"
Margin="3"
Name="cancelButton"
Content="Cancel" />
</Grid>
(I've removed some Button handling stuff!)
In my ViewModel, I have code like:
public void LogonButtonClicked(object sender, ExecuteEventArgs e)
{
if (securityService.Login(PassCode))
{
eventBroker.Invoke(EventName.CloseLogonView, this);
}
else
{
IsViewVisible = Visibility.Hidden;
msgService.ShowError("Pass Code was not recognised", "Logon Error");
IsViewVisible = Visibility.Visible;
PassCode = "";
IsPassCodeFocused = true;
}
}
I am using an attached property:
public class FocusExtension
{
public static readonly DependencyProperty IsFocusedProperty = DependencyProperty.RegisterAttached("IsFocused", typeof(bool?), typeof(FocusExtension), new FrameworkPropertyMetadata(IsFocusedChanged));
public static bool? GetIsFocused(DependencyObject element)
{
if (element == null)
{
throw new ArgumentNullException("element");
}
return (bool?)element.GetValue(IsFocusedProperty);
}
public static void SetIsFocused(DependencyObject element, bool? value)
{
if (element == null)
{
throw new ArgumentNullException("element");
}
element.SetValue(IsFocusedProperty, value);
}
private static void IsFocusedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
FrameworkElement fe = (FrameworkElement)d;
if (e.OldValue == null)
{
fe.GotFocus += FrameworkElement_GotFocus;
fe.LostFocus += FrameworkElement_LostFocus;
}
if ((bool)e.NewValue)
{
fe.Focus();
}
}
private static void FrameworkElement_GotFocus(object sender, RoutedEventArgs e)
{
((FrameworkElement)sender).SetValue(IsFocusedProperty, true);
}
private static void FrameworkElement_LostFocus(object sender, RoutedEventArgs e)
{
((FrameworkElement)sender).SetValue(IsFocusedProperty, false);
}
}
}
What happens is that the cursor appears in the TextBox but is not flashing. The TextBox does not have focus because nothing appears when you type. If you click on it, it works fine.
What have I done wrong?
I couldn't reproduce it using the code you provided, but two things I noticed are:
1) On LogonView, I think your intent was
FocusManager.FocusedElement="{Binding ElementName=passCodeTextBox}"
and not
FocusManager.FocusedElement="{Binding Path=passCodeTextBox}"
2) It looks like IsFocused is applied in multiple places. I'd try setting a breakpoint in IsFocusedChanged() and see which control gets it last.
Between that, and watching FocusManager.FocusedElement ( http://msdn.microsoft.com/en-us/library/system.windows.input.focusmanager.focusedelement.aspx ) and Keyboard.FocusedElement ( http://msdn.microsoft.com/en-us/library/system.windows.input.keyboard.focusedelement ) you should be able to track down where focus is really going.
I have ListBox. when i click on ListBox item I have to show item information in popup But it does not close after clicking out side. I am creating popup in itemsselected event. how to handle popup close?
One approach is to create a canvas with a transparent background that you make visible at the same time as opening the Popup and attaching to is Mouse down event to closed the popup. Like this:-
Xaml:-
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Popup x:Name="MyPopup" Closed="MyPopup_Closed" HorizontalOffset="100" VerticalOffset="100" Opened="Popup_Opened">
<ListBox x:Name="PopupChild" MaxHeight="300" LostFocus="PopupChild_LostFocus">
<sys:String>Hello World</sys:String>
</ListBox>
</Popup>
<Button Content="Open Popup" Grid.Row="1" Click="Button_Click" />
<Canvas x:Name="PopupOpen" Visibility="Collapsed" Background="Transparent" Grid.RowSpan="2" MouseLeftButtonDown="PopupOpen_MouseLeftButtonDown" />
</Grid>
Code:-
private void Button_Click(object sender, RoutedEventArgs e)
{
MyPopup.IsOpen = true;
}
private void Popup_Opened(object sender, EventArgs e)
{
PopupOpen.Visibility = Visibility.Visible;
}
private void PopupChild_LostFocus(object sender, RoutedEventArgs e)
{
MyPopup.IsOpen = false;
}
private void PopupOpen_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MyPopup.IsOpen = false;
}
private void MyPopup_Closed(object sender, EventArgs e)
{
PopupOpen.Visibility = Visibility.Collapsed;
}
Note that its important that if your popup contains a control that can receive the focus that you also handle LostFocus.
This is similar to a question that I had. Take a look at How to dismiss a popup in Silverlight when clicking outside of the control?. I posted in my solution an extension method that's been very helpful in making popups close when clicking outside of them.
I'm not quite sure what you mean by "clicking out side" because popups act in a modal way.
You should set up your popup window as a ChildWindow. Then you can handle the Closed event.
Here's a very simple sample that shows a selected string from a listbox in a main window.
First the main window:
<UserControl x:Class="PopupTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Vertical">
<ListBox x:Name="SomeList" Width="100" Height="100" />
<TextBlock x:Name="DialogResult" Width="100" />
</StackPanel>
</Grid>
In the codebehind, the popup is triggered when the list selection changes. Simply set up a Closed handler. In this example, I simply put the chosen list item into a textblock, then upon closing the popup, I just put the dialog result in a textblock on the main window (to show if the user pushed ok or cancel).
public MainPage()
{
InitializeComponent();
SomeList.SelectionChanged += new SelectionChangedEventHandler(SomeList_SelectionChanged);
SomeList.Items.Add("one");
SomeList.Items.Add("two");
SomeList.Items.Add("three");
}
void SomeList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var popup = new SomePopup();
popup.Closed += new EventHandler(popup_Closed);
popup.ChosenItem.Text = (string)SomeList.SelectedItem;
DialogResult.Text = "";
popup.Show();
}
void popup_Closed(object sender, EventArgs e)
{
var popup = sender as SomePopup;
if (popup.DialogResult == true)
DialogResult.Text = "Ok";
else
DialogResult.Text = "Cancel";
}
The popup closes when the user pushes Ok or Cancel, because the DialogResult value is set in the popup's code-behind:
private void OKButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = true;
}
private void CancelButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
}