I've searched quite a bit but most of the solutions I found were from people asking on how to do it in C#. I wanted both to practice my XAML and reduce my already messy C# code so I decided to try it on XAML.
What I've Tried:
I've created a template for the Context Menu and here's my code:
<ControlTemplate TargetType="ContextMenu">
<Grid>
<!-- Some Content -->
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Parent.IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="IsOpen" Value="True"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
My understanding of the code:
I imagined the hierarchy to be like this:
Parent UIControl (Can be a button, textbox, etc)
|---> Context Menu
|---> Template
So with my code Binding Parent.IsMouseOver, RelativeSource={RelativeSource TemplatedParent}, I expected it to work like this:
I've set my source to the TemplatedParent first (which I expected to be the Context Menu)
Now I'm trying to bind to the Parent (which is a UIControl of whoever uses the Context Menu) of my source (which at the moment I expect to be the TemplatedParent)
Here's the full code of everything involved with this:
Parent:
<Button Content="Button" ContextMenu="{DynamicResource ErrorPopup}"/>
Context Menu w/ Control Template (They're stored on a ResourceDictionary since they'll be reused by other controls to display each of their own Errors):
-
<ContextMenu x:Key="ErrorPopup" x:Shared="False">
<ContextMenu.Style>
<Style TargetType="ContextMenu">
<Setter Property="IsOpen" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContextMenu">
<Grid>
<!-- Some Content -->
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Parent.IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="IsOpen" Value="True"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ContextMenu.Style>
</ContextMenu>
What I expect:
I expected the Context Menu to popup when I place my cursor on top of the Button.
UPDATE:
I've managed to make some progress, I tried changing my binding to:
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button,Mode=FindAncestor}}" Value="True">
<Setter Property="IsOpen" Value="True"/>
</DataTrigger>
Unfortunately it's displaying some weird behavior wherein the MouseOver would show the context menu ONLY if I forcibly open a Context Menu beforehand by using my mouse's right click.
This doesn't work:
I hover over the Button
Context Menu doesn't show up
This works:
I right click the Button
Context Menu shows up
Closes quickly
Shows a Context Menu from the Mouse Over
I move the cursor away = Context Menu disappears
I move the cursor inside = Context Menu appears
Could this be because the context menu doesn't actually exist yet up until I explicitly open it through a mouse's right click? And after initializing it, only then will the triggers work?
Related
I have a control template and I want to trigger some actions only if mouse is over a certain part of it. Here is the core of my template (simplified for demonstration):
<ControlTemplate TargetType="{x:Type graphicElements:MyTabItem}">
<Grid x:Name="templateRoot">
<Grid x:Name="templateChild" />
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, ElementName=templateChild}" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="Red" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
When I put ElementName as templateRoot it works and turns red. When I put it as templateChild it doesn't work... Why not?
In the simplified version of your code the binding to the templateRoot grid also won't work. The problem is, that WPF needs to perform Hit Tests on the elements to raise certain events or to update the IsMouseOver property. Since you don't have a background brush set for the grids, they will never receive mouse inputs, hence your trigger will never execute. Try this:
<Grid x:Name="templateRoot">
<Grid x:Name="templateChild" Background="Transparent"/>
</Grid>
I'm working on a WPF application and i have a little problem.
I have 1 ToggleButton and 1 TextBox. When i click on the ToggleButton, the TextBox apears and gets focus. This is good. But now i want that when i click on another textbox or just somewhere else, that the textbox loses his focus and disapears. I tried this with Differnet triggers and setters, but can't get it to work.
My code now:
<ToggleButton x:Name="SearchButton" Width="100" Height="100" BorderThickness="0" Margin="580,0,0,0" Template="{DynamicResource ButtonBaseControlTemplate1}" Panel.ZIndex="1">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsChecked, ElementName=SearchButton}" Value="True" />
<Condition Binding="{Binding Visibility, ElementName=SearchBox}" Value="Visible"/>
</MultiDataTrigger.Conditions>
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=SearchBox}" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton><TextBox x:Name="SearchBox" Margin="100,33,0,34" Visibility="{Binding IsChecked, ElementName=SearchButton, Converter={StaticResource BoolVisibilityConverter}}" Opacity="0" FontSize="24" FontFamily="Arial" Background="{x:Null}" Foreground="#FF7F7F7F" BorderThickness="0">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="TextBox.IsFocused" Value="False">
<Setter Property="ToggleButton.IsChecked" Value="False" TargetName="SearchButton" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
The fact, that the styles in the WPF separated from each other, it's just a bunch of settings setters. We can say, that two different styles for controls, with two different visual trees. So when you're trying to style TextBox to access ToggleButton it does not work, because of its visual tree no ToggleButtons.
In WPF for editing elements in the visual tree, and control in particular, uses a template control or controls placed within view of one Style (but this is usually done with the help of templates, such as DataTemplate, or with ControlTemplate).
I think it will suit you to control the Expander. It already has ToggleButton and content. Example:
XAML
<Expander Header="SearchButton">
<TextBox Text="SearchBox: Opened" Background="Gainsboro" />
</Expander>
Output
To change the view of Expander, you need to change his Style. With it, you can set any form and view of control.
For more information see:
Expander in MSDN
Styling and Templating in MSDN
Customizing the Appearance of an Existing Control by Using a ControlTemplate
Data Templating Overview
Is code behind in WPF for UI related things really ugly?
I'm trying to achieve similar effect to Visual Studio Panels (something like sample in WPF Unleashed book).
I want to change Grid Visibility to Visible when mouse enter into the button "solutionManagerPanel". It works however when my mouse enter into this Grid, it's visibility changes to hidden.
Below is code in xaml:
<Grid Grid.Column="2" Background="Gray" Visibility="{Binding ElementName=solutionManagerPanel, Path=IsMouseOver, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.Resources>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
Is there any simple way to do this in XAML or can I write event handling code-behind for this? Wouldn't this violate "clean, MVVM code rules"?
I am using Expander in WPF to display my data. The default style for the Expander control contains a toggle button which shows/hides my content when I click on it.
How can I modify the style so that it expands when I hovers the mouse over the header and collapse when I move away?
Barebone setup should be this:
<Style TargetType="{x:Type Expander}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="IsExpanded" Value="True" />
</Trigger>
</Style.Triggers>
</Style>
(Applies to the whole expander, not just the header. That would probably require messing with the template.)
It is possible to use databinding between isExpanded property an ismouseover:
IsExpanded="{Binding IsMouseOver, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Instead of disabling the button which happens automatically, i would like to hide (or rather collapse the visibility of) the button.
You could use a Style and Triggers, assuming that the command is in charge of setting the Button enabled/disabled:
<Button x:Name="btnMoveUp"
Command="{x:Static local:Window1.MoveItemUp}">
<Button.Style>
<Style TargetType="{x:Type Button}" >
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Note that you can define this Style at a higher scope and share it - I just put it right with the Button for a more compressed example.
The same behavior without style and trigger, if the Visibility property is not bound yet.
Command={Binding MyCommand}
Visibility="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource BTVC}}"
Where BTVC is a BooleanToVisibilityConverter (that is a must have).
Use the BooleanToVisibilityConverter and bind to a bool as described here.