WPF - Binding IsMouseOver to Visibility - wpf

I have a window which overrides a RadioButton's ControlTemplate to show a custom control inside of it. Inside the custom control, I have a button's visibility tied to IsMouseOver, which works correctly in showing the button only when the mouse is hovering over the control. However, when I click on the RadioButton, the Button disappears. After some debugging and reading, it seems that the RadioButton is capturing the mouse on click, and this makes IsMouseOver for the UserControl false.
I tried binding the Button's visibility to FindAncestor {x:Type RadioButton} and it works, but it seems a bit fragile to me to have the UserControl depend on who is containing it. The code for the window and the user control is below. Any suggestions?
<Window x:Name="window" x:Class="WPFTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WPFTest="clr-namespace:WPFTest"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<WPFTest:TestUC />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Border BorderBrush="Black" BorderThickness="2">
<StackPanel>
<RadioButton x:Name="OptionButton" Height="100" />
<TextBlock Text="{Binding ElementName=OptionButton, Path=IsMouseOver}" />
</StackPanel>
</Border>
</Window>
<UserControl x:Name="_this" x:Class="WPFTest.TestUC"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
<StackPanel>
<TextBlock Text="SomeText" />
<TextBlock Text="{Binding ElementName=_this, Path=IsMouseOver}" />
<Button x:Name="_cancelTextBlock" Content="Cancel" Visibility="{Binding ElementName=_this, Path=IsMouseOver, Converter={StaticResource BooleanToVisibilityConverter}}" />
</StackPanel>
</UserControl>

After the event is handled by the RadioButton , it is only set as handled but in reality it still bubbles up. So you just need to specify that you want to handle handled events too.
For that you need to look at handledEventsToo.
Unfortunately I don't think it can be set in xaml. only code.

I seemed to have fixed the problem by setting a trigger in the control template, which binds to the RadioButton's IsMouseOver, and sets a custom DependencyProperty on the UserControl.
Something like:
<ControlTemplate TargetType="{x:Type RadioButton}">
<WPFTest:TestUC x:Name="UC" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ShowCancel" Value="True" TargetName="UC"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I'm still confused as to why the Mouse Capture falsifies IsMouseOver on the UserControl child of the RadioButton however. Can anyone shed some light on this?

Very interesting problem. I myself would like to know more of why the UserControl IsMouseOver changes to false when the TextBlock(s) in its visuals are mouse downed upon.
However, here is another way to solve it ... maybe you will like this approach better.
Instead of using RadioButton (since you are retemplating it) why don't you just use Control? (I think IsMouseOver is getting changed to false due to the fact that it is a Button derived control.)
Following is the xaml for the Window ...
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1"
Width="300"
Height="300"
>
<Window.Resources>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<local:UserControl1/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Border BorderBrush="Black" BorderThickness="2">
<StackPanel>
<Control x:Name="OptionButton" Height="100"/>
<TextBlock Text="{Binding ElementName=OptionButton, Path=IsMouseOver}"/>
</StackPanel>
</Border>
</Window>
EDIT:
I just wanted to add ... that if you're okay with the above approach ... then, the right thing to do is probably to just use the UserControl in the Window's visual tree versus retemplating a Control. So ... like this:
<Window
x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1"
Width="300"
Height="300"
>
<Border BorderBrush="Black" BorderThickness="2">
<StackPanel>
<local:UserControl1 x:Name="OptionButton" Height="100"/>
<TextBlock Text="{Binding ElementName=OptionButton, Path=IsMouseOver}"/>
</StackPanel>
</Border>
</Window>

Related

Set margin for all controls and textblocks using WPF style

I would like to set the margin for all controls and TextBlocks using style. Here is my window XAML without using styles:
<Window x:Class="Window2"
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"
Title="Window2" Height="150" Width="300">
<StackPanel>
<TextBlock Margin="5" Text="Test" Foreground="White"/>
<TextBox Margin="5">Test</TextBox>
<Button Margin="5">Test</Button>
</StackPanel>
</Window>
and this is the expected result:
I do understand that TextBlock is FrameWorkElement and TextBox & Button is a Control (which is a FrameWorkElement). Margin property is introduced on the FrameWorkElement so I have tried setting Margin on the FrameWorkElement without success:
<Window x:Class="Window2"
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"
Title="Window2" Height="150" Width="300">
<StackPanel>
<StackPanel.Resources>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="5"/>
</Style>
</StackPanel.Resources>
<TextBlock Text="Test" Foreground="White"/>
<TextBox>Test</TextBox>
<Button>Test</Button>
</StackPanel>
</Window>
How can I set the margin for all framework element using style?
TargetType must match the exact type of the FrameWorkElement. Defining a style for FrameWorkElement does not apply the style to child classes (e.g. the TextBlock).
So it is not possible to to set the margin this way. It is possible to set the margin by adding a Key to the style and selecting this style for each element one by one
<Window x:Class="Window2"
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"
Title="Window2" Height="150" Width="300">
<StackPanel>
<StackPanel.Resources>
<Style x:Key="MX">
<Setter Property="FrameworkElement.Margin" Value="5"/>
</Style>
</StackPanel.Resources>
<TextBlock Style="{StaticResource MX}" Text="Test"/>
<TextBox Style="{StaticResource MX}">Test</TextBox>
<Button Style="{StaticResource MX}">Test</Button>
</StackPanel>
<Window.Resources>
<!-- One style for each *type* of control on the window -->
<Style TargetType="TextBox">
<Setter Property="Margin" Value="10"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="10"/>
</Style>
</Window.Resources>
<StackPanel>
<TextBox Text="TextBox"/>
<TextBlock Text="TextBlock"/>
</StackPanel>

WPF button focus style being overriden when placed in content presenter

The Setup
I have the following style that I apply to most of the windows in my application:
<ResourceDictionary x:Class="MyNamespace.ChromeWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="CustomChromeTest" TargetType="{x:Type Window}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid x:Name="GridMain" Background="{StaticResource MainFormColor}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
I use it to customize the window chrome around my window (I have removed that part) so all the actual contents of the window go inside the content presenter. I use this style like so:
<Window x:Class="MyNamespace.Window1"
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"
Title="Window1" Height="300" Width="300"
Style="{DynamicResource CustomChromeTest}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/WPFControlLibrary;component/Resources/ChromeWindow.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<StackPanel>
<Button Margin="5" Content="Button" Width="75"/>
<Button Margin="5" Content="Button" Width="75"/>
<Button Margin="5" Content="Button" Width="75"/>
<Button Margin="5" Content="Button" Width="75"/>
</StackPanel>
This XAML above produces a window that looks like this:
The Problem
In a normal window, when the user is tabbing through the controls, the current button is highlighted to show the user the current button. Note the border around the 3rd button below.
For some reason, the moment I use my style, this feature disappears and there is no indication of which button has focus, even though the user can tab like normal. Why is this and how can I restore the built-in functionality.
Please Note
I use this style with dozens of windows and hundreds of controls. I do not want to use a style on every control with a trigger that displays a border when the control has focus. I want to restore the default functionality that was being used before I applied my custom window style.
You'll just need to define the ContentPresenter as AdornerDecorator for Window and it will work as intended. Which I didn't figure out at first either apparently :)
Style;
<Style x:Key="CustomChromeTest" TargetType="{x:Type Window}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid x:Name="GridMain" Background="Yellow">
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and your window...
<Window
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:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2" x:Name="Testeroo"
x:Class="WpfApplication1.MainWindow"
mc:Ignorable="d" Style="{StaticResource CustomChromeTest}"
Title="MainWindow" Height="550" Width="750">
<StackPanel>
<Button Margin="5" Content="Button" Width="75"/>
<Button Margin="5" Content="Button" Width="75"/>
<Button Margin="5" Content="Button" Width="75"/>
<Button Margin="5" Content="Button" Width="75"/>
</StackPanel>
</Window>
Hope this helps, cheers.

Trouble with setting both DataTemplate and ControlTemplate to Map Pushpins in WPF

I am having trouble setting both DataTemplate and ControlTemplate to my bing map pushpins. I am using data binding which works to a point when i try to customize my pushpins by adding ControlTemplate.
My code:
<UserControl x:Class="BingMap.MapUserControl"
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:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
xmlns:viewPushpins="clr-namespace:Program.Map_Control.ViewPushpins">
<UserControl.DataContext>
<viewPushpins:MapViewPushpins/>
</UserControl.DataContext>
<UserControl.Resources>
<DataTemplate x:Key="PushpinDataTemplateP">
<m:Pushpin Location = "{Binding MapLocationP}" ToolTip="{Binding MapTooltipTextP}"/>
</DataTemplate>
<ControlTemplate x:Key="PushpinControlTemplateP">
<Grid>
<Ellipse Fill="Green" Width="15" Height="15" />
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Grid>
<m:Map Name="myMap"
CredentialsProvider="..."
ZoomLevel="1"
Center="30,-100"
Mode="AerialWithLabels"
MouseLeftButtonUp="Map_Left_Click_Up">
<m:MapItemsControl
Template="{StaticResource PushpinControlTemplateP}"
ItemTemplate="{StaticResource PushpinDataTemplateP}" MouseLeftButtonUp="Map_Left_Click_Up"
ItemsSource="{Binding MapLocationsP}"/>
</m:Map>
</Grid>
</UserControl>
This code works if I remove the line:
Template="{StaticResource PushpinControlTemplateP}"
but then don't get my customized pushpin.
Any ideas on how can I fix this?
By setting MapItemsControl.Template, you're specifying a template for the MapItemsControl itself, not the items it produces. You can set the template for individual items produced by an ItemsControl indirectly via the ItemContainerStyle:
<Style x:Key="PushPinStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<!-- your template goes here -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<m:MapItemsControl ItemContainerStyle="{StaticResource }" ...>
I see where i got this wrong. As already mentioned by Kent, the line
Template="{StaticResource PushpinControlTemplateP}"
shouldn't be in MapItemsControl.
I solved my problem with moving this line of code to Resources so they look like this:
<UserControl.Resources>
<ControlTemplate x:Key="PushpinControlTemplateP">
<Grid>
<Ellipse Fill="Green" Width="15" Height="15" />
</Grid>
</ControlTemplate>
<DataTemplate x:Key="PushpinDataTemplateP">
<m:Pushpin Location = "{Binding MapLocationP}" ToolTip="{Binding MapTooltipTextP}" Template="{StaticResource PushpinControlTemplateP}"/>
</DataTemplate>
</UserControl.Resources>

Does anyone have a simple example of a UserControl with a single ContentPresenter?

So far, I have this:
<UserControl
x:Class="MyConcept.ExpanderPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Border
Style="{StaticResource Border_PanelStyle}"
CornerRadius="3" />
<ContentPresenter />
</Grid>
</UserControl>
Sample usage of this UserControl:
<nc:ExpanderPanel
Grid.Row="0">
<Expander
IsExpanded="True"
Header="NMT Users">
<StackPanel>
...
</StackPanel>
</Expander>
</nc:ExpanderPanel>
Discussion
If I run this, I see nothing. No content is presented, not even the border that is built into the UserControl.
I thought maybe I needed to make the ContentPresenter a dependency property, but I couldn't figure out how I would link the property to the ContentPresenter in the UserControl's XAML.
Can someone provide a simple example that shows how to build a UserControl (or some kind of custom control) with a single ContentPresenter?
ContentPresenters are main used in ControlTemplates and bound with a TemplateBinding to the ContentControl.Content.
from this site... a control template for a button that uses a ContentPresenter
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Rectangle Fill="{TemplateBinding Property=Background}" />
<ContentPresenter
Content="{TemplateBinding Property=ContentControl.Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How can I set the minimum size of a expander control in WPF?

How can I set expander to show some content it encloses even in collapsed state ? I have the following code snippet, can anyone point changes to this code ?
<Window x:Class="UI2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="358" Width="300">
<TabControl>
<TabItem Header="Buga Buga">
<StackPanel>
<Expander ClipToBounds="False">
<ListBox Name="lstProcesses"
MinHeight="60">
</ListBox>
</Expander>
</StackPanel>
</TabItem>
</TabControl>
Thanks
It doesn't sound like Expander is the control you should be using for this scenario. Expander has a header, and content, like this:
<Expander Header="Visible all the time">
<TextBlock Text="Hidden until expanded" />
</Expander>
It sounds to me like you want a control that's set to a specific height some of the time, and unrestrained at other times.
I think you could achieve this by binding a ToggleButton (which Expander uses too, internally) to the MaxHeight property of your ListBox.
Try something like this in Kaxaml:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:diag="clr-namespace:System.Diagnostics;assembly=System">
<Page.Resources>
<!-- A way of getting some test data in Kaxaml -->
<ObjectDataProvider x:Key="Processes"
MethodName="GetProcesses"
ObjectType="{x:Type diag:Process}" />
</Page.Resources>
<StackPanel>
<ToggleButton Name="Expand" Content="Expand" />
<ListBox Name="lstProcesses"
ItemsSource="{Binding Source={StaticResource Processes}}"
DisplayMemberPath="ProcessName">
<ListBox.Style>
<Style TargetType="ListBox">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=Expand, Path=IsChecked}"
Value="False">
<Setter Property="MaxHeight" Value="60" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>
</ListBox>
</StackPanel>
</Page>
Here's a quick example of how to the Collapsed text (the Header) to the selected item in the listbox contained within the expander:
<Expander ClipToBounds="False">
<ListBox Name="lstProcesses"
MinHeight="60">
</ListBox>
<Expander.Header>
<TextBlock Text="{Binding SelectedItem, ElementName=lstProcesses}"/>
</Expander.Header>
</Expander>

Resources