I am Working with WPF MVVM
I made the following DataTemplate:
<DataTemplate DataType="{x:Type r:CustomControl}">
<Border x:Name="bord" BorderThickness="0" Width="150" Height="150" Margin="0"
BorderBrush="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Background}"
Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type con:Control}, Mode=FindAncestor}, Path=TileColorPair[0]}"
ContextMenu="{StaticResource CMenu}">
<Button Width="{Binding Size}" Height="{Binding Size}">
<Button.Template>
<ControlTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="img" Grid.Row="0" Source="{Binding ImageUrl}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Label Grid.Row="1" Content="{Binding Text}" FontFamily="{DynamicResource DefaultFont}" FontSize="{DynamicResource {x:Static SystemFonts.CaptionFontSizeKey}}"
Foreground="White" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Border>
And I associated a ContextMenu on the Border.
Each menu has an specific Command.
<ContextMenu x:Key="CMenu">
<MenuItem Command="{Binding UpdateCommand}" Header="Update">
<MenuItem.Icon>
<Image Width="45" Height="45" Source="/Assembly;component/Resources/edit.png"/>
</MenuItem.Icon>
</MenuItem>
<MenuItem Command="{Binding SelectCommand}" Header="Select">
<MenuItem.Icon>
<Image Width="45" Height="45" Source="/Assembly;component/Resources/search.png" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
How do I Bind the Event from the Right Click that activates the ContextMenu to the Left Click as well?
Create a new left button handler on the Border element:
<Border x:Name="Win"
Width="40"
Height="40"
Background="Purple"
MouseLeftButtonUp="UIElement_OnMouseLeftButtonUp">
and then add this:
private void UIElement_OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
var mouseDownEvent =
new MouseButtonEventArgs(Mouse.PrimaryDevice,
Environment.TickCount,
MouseButton.Right)
{
RoutedEvent = Mouse.MouseUpEvent,
Source = Win,
};
InputManager.Current.ProcessInput(mouseDownEvent);
}
What it does, it basically maps the left-click into right-click.
Related
I'm developing a WPF desktop application on .net core 3.1 and it has a classic menu bar with menu items.
The small problem I found is that while the menu item pops up, title bar buttons can't be clicked directly. For example, if I clicked close(x) button, only the pop up menu is hidden, but no window_Closing event is fired. I have to click twice to actually close the window.
My concern is that regular window's application's behavior is different and these window's buttons are directly working even if menu is popped up. Note that application with menu bar such as visual studio 2019, visual studio code all don't have this problem and title bar buttons are working even if menu item is popped up.
Even though it might be just a trivial issue, this inconsistency might be confusing for some users and this makes my WPF app look non native and awkward.
Here is a snippet from my XAML code and window close event handler in my MainWindow code behind.
<Window x:Class="MyApp.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="1000" Width="1600"
Icon="{StaticResource AppIcon}"
Closing="Window_Closing">
...
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Vertical">
<Menu>
<MenuItem Header="File">
<MenuItem Command="{Binding New}"/>
<MenuItem Command="{Binding Open}"/>
<MenuItem Command="{Binding Save}"/>
<MenuItem Command="{Binding SaveAs}"/>
<MenuItem Command="{Binding SaveAll]"/>
<Separator />
<MenuItem Command="{Binding Exit}" />
</MenuItem>
private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
try
{
if (DataContext is MainWindowViewModel vm)
vm.Exit();
}
catch (OperationCanceledException)
{
e.Cancel = true;
}
}
Am I coding wrongly and is there a way to fix this behavior? Or is this just a normal behavior of all WPF applications? It seems even a simplest sample applications from WPF books show the same behavior.
EDIT:
I suspect that the real issue is something to do with the fact that WPF pop ups are rendered higher than Win32 elements. I'm wondering if there is an easy way to change the behavior.
I'm not sure, but I think that behavior is the default and there is no easy way to implement the behavior you want.
One way to implement it is to handle the MenuItem.SubmenuClosed event and detect the UIElement that was clicked (by hit testing) and react accordingly.
I found that this is no longer a problem if I replace normal WPF Window with MetroWindow using MahApp.Metro framework. With MahApp's MetroWindow, every buttons on the window title bar can be clicked directly even when menu is opened.
It seems that MetroWindow is rendering its title bar and buttons using control template and it isn't real Win32 windows's title bar.
<ControlTemplate x:Key="MahApps.Templates.MetroWindow" TargetType="{x:Type mah:MetroWindow}">
<Grid Background="{TemplateBinding Background}"
LayoutTransform="{Binding LayoutTransform, RelativeSource={RelativeSource TemplatedParent}}"
RenderTransform="{Binding RenderTransform, RelativeSource={RelativeSource TemplatedParent}}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
UseLayoutRounding="True">
<AdornerDecorator>
<Grid UseLayoutRounding="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessToDoubleConverter}, ConverterParameter={x:Static converters:ThicknessSideType.Left}}" />
<!-- icon -->
<ColumnDefinition Width="Auto" />
<!-- left window commands, title, right window commands -->
<ColumnDefinition Width="*" />
<!-- min,max,close buttons -->
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessToDoubleConverter}, ConverterParameter={x:Static converters:ThicknessSideType.Right}}" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessToDoubleConverter}, ConverterParameter={x:Static converters:ThicknessSideType.Top}}" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle x:Name="PART_WindowTitleBackground"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="3"
Fill="{TemplateBinding WindowTitleBrush}"
Focusable="False"
StrokeThickness="0" />
<!-- icon -->
<ContentControl x:Name="PART_Icon"
Grid.Row="1"
Grid.Column="1"
Height="{Binding TitleBarHeight, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
MinWidth="{Binding TitleBarHeight, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Panel.ZIndex="1"
Content="{TemplateBinding Icon}"
ContentTemplate="{TemplateBinding IconTemplate}"
Focusable="False"
Visibility="{TemplateBinding ShowIconOnTitleBar, Converter={StaticResource BooleanToVisibilityConverter}}" />
<mah:MetroThumb x:Name="PART_WindowTitleThumb"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="5"
Style="{StaticResource MahApps.Styles.Thumb.WindowTitle}"
UseLayoutRounding="True" />
<DockPanel Grid.Row="1"
Grid.Column="2"
VerticalAlignment="Top"
Focusable="False">
<!-- the left window commands -->
<mah:ContentPresenterEx x:Name="PART_LeftWindowCommands"
Height="{Binding TitleBarHeight, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
VerticalAlignment="Top"
controlzEx:WindowChrome.IsHitTestVisibleInChrome="True"
Content="{Binding LeftWindowCommands, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
DockPanel.Dock="Left"
Focusable="False" />
<!-- the right window commands -->
<mah:ContentPresenterEx x:Name="PART_RightWindowCommands"
Height="{Binding TitleBarHeight, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
VerticalAlignment="Top"
controlzEx:WindowChrome.IsHitTestVisibleInChrome="True"
Content="{Binding RightWindowCommands, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
DockPanel.Dock="Right"
Focusable="False" />
<!-- the title bar -->
<mah:MetroThumbContentControl x:Name="PART_TitleBar"
Height="{Binding TitleBarHeight, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
HorizontalAlignment="{TemplateBinding TitleAlignment}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Content="{TemplateBinding Title}"
ContentCharacterCasing="{TemplateBinding TitleCharacterCasing}"
ContentTemplate="{TemplateBinding TitleTemplate}"
Focusable="False">
<ContentControl.Foreground>
<MultiBinding Converter="{x:Static converters:BackgroundToForegroundConverter.Instance}">
<Binding ElementName="PART_WindowTitleBackground"
Mode="OneWay"
Path="Fill" />
<Binding Mode="OneWay"
Path="TitleForeground"
RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</ContentControl.Foreground>
</mah:MetroThumbContentControl>
</DockPanel>
<!-- the window button commands -->
<mah:ContentPresenterEx x:Name="PART_WindowButtonCommands"
Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="3"
Height="{Binding TitleBarHeight, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
VerticalAlignment="Top"
Panel.ZIndex="1"
controlzEx:WindowChrome.IsHitTestVisibleInChrome="True"
Content="{Binding WindowButtonCommands, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Focusable="False" />
<!-- the main window content -->
<mah:MetroContentControl x:Name="PART_Content"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="5"
FocusVisualStyle="{x:Null}"
IsTabStop="False"
OnlyLoadTransition="True"
TransitionsEnabled="{TemplateBinding WindowTransitionsEnabled}"
UseLayoutRounding="True">
<mah:ContentPresenterEx x:Name="PART_ContentPresenter"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessBindingConverter}, ConverterParameter={x:Static converters:ThicknessSideType.Top}}"
controlzEx:WindowChrome.IsHitTestVisibleInChrome="True"
UseLayoutRounding="False" />
</mah:MetroContentControl>
<!-- disables the main content when a modal flyout is shown -->
<Rectangle Name="PART_FlyoutModal"
Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1"
Grid.ColumnSpan="3"
Fill="{TemplateBinding FlyoutOverlayBrush}"
Visibility="Hidden" />
<mah:MetroThumb x:Name="PART_FlyoutModalDragMoveThumb"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="5"
Style="{StaticResource MahApps.Styles.Thumb.WindowTitle}"
Visibility="{Binding ElementName=PART_FlyoutModal, Path=Visibility, Mode=OneWay}" />
<!-- flyouts -->
<ContentControl Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1"
Grid.ColumnSpan="3"
VerticalAlignment="Stretch"
Panel.ZIndex="2"
Content="{Binding Flyouts, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Focusable="False"
KeyboardNavigation.TabNavigation="None" />
<!-- inactive dialog container -->
<Grid x:Name="PART_MetroInactiveDialogsContainer"
Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1"
Grid.ColumnSpan="3"
Panel.ZIndex="3"
FocusVisualStyle="{x:Null}" />
<!-- overlay effect container -->
<Grid x:Name="PART_OverlayBox"
Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1"
Grid.ColumnSpan="3"
Panel.ZIndex="4"
Background="{TemplateBinding OverlayBrush}"
FocusVisualStyle="{x:Null}"
Focusable="False"
Opacity="0"
Visibility="Hidden" />
<!-- active dialog container -->
<Grid x:Name="PART_MetroActiveDialogContainer"
Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1"
Grid.ColumnSpan="3"
Panel.ZIndex="5"
FocusVisualStyle="{x:Null}" />
</Grid>
</AdornerDecorator>
<Border x:Name="PART_Border"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{x:Null}"
BorderBrush="{TemplateBinding GlowBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
UseLayoutRounding="True" />
<ResizeGrip x:Name="WindowResizeGrip"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
IsTabStop="False"
UseLayoutRounding="True"
Visibility="Collapsed" />
</Grid>
I created a button that looks like:
Here is the xaml:
<Button x:Name="InstallButtonContainer" Style="{StaticResource ResourceKey=StyleAppButton}" Grid.Column="3" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Button x:Name="InstallButton" Content="Install" Grid.Column="0"
Style="{StaticResource ResourceKey= StyleDropDownButton}"
ToolTip="{x:Static local:ToolTipStrings.INSTALLBUTTONTOOLTIP}" Click="InstallButton_Click"
ToolTipService.ShowDuration="2000"
Margin="-20,-2,-4.5,-2" Grid.ColumnSpan="2" Width="51" FontFamily="Calibri" />
<Button x:Name="DropdownButton" Grid.Column="1" Margin="18,-2,-20,-2"
Width="14" Click="load_install_dropdown" Style="{StaticResource ResourceKey= StyleDropDownButton}">
<Button.ContextMenu>
<ContextMenu x:Name="ButtonContextMenu">
<MenuItem Header="Install" Click="BaseReleaseInstallContextMenuClick" x:Name="MultiInstallBtn">
<MenuItem.Icon>
<Image Width="12" Height="12">
<Image.Source>
<ImageSource>Resources/install.ico</ImageSource>
</Image.Source>
</Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Silent Install" Click="BaseReleaseSilentInstallContextMenuClick" x:Name="MultiInstallSilentBtn">
<MenuItem.Icon>
<Image Width="12" Height="12">
<Image.Source>
<ImageSource>Resources/install.ico</ImageSource>
</Image.Source>
</Image>
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Download" Click="BaseReleaseMultipleDownloadContextMenuClick">
<MenuItem.Icon>
<Image Width="12" Height="12">
<Image.Source>
<ImageSource>Resources/Down.png</ImageSource>
</Image.Source>
</Image>
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</Button.ContextMenu>
<StackPanel Orientation="Horizontal">
<Path x:Name="BtnArrow" Margin="-3,-10" VerticalAlignment="Center" Width="8" Height="10" Fill="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
Stretch="Uniform" HorizontalAlignment="Right"
Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z "/>
</StackPanel>
</Button>
</Grid>
</Button>
Now based on some condition, I want to disable the Install and Silent Install buttons through code.
I tried using:
if(condition)
{
MultiInstallBtn.IsEnabled = false;
}
but it does not seems to work. Is there anything wrong in the way I am accessing it?
As long as that code is in the code behind of the control then it should work.
I notice that there may be some custom styling being applied too. Could it be that you are missing styling for the menu item disabled state? So the menu item is actually disabled, but visually it doesn't present in a different way?
Check that in the style or control template for the Menu Item that it is reacting to the control's IsEnabled property or that there's a "Disabled" VisualState defined.
I have a Popup in a DataTemplate of a GridView.
The DataTemplate has 2 buttons which opens up this Popup. This works perfectly well. But I see some erratic behaviour when the GridView is scrolled.
Popup opened
When GridView is scrolled the popup stays on the page
XAML Code for the GridView ItemTemplate
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Popup x:Name="PagesPopup" IsOpen="{Binding IsPagesPopupOpen}">
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Popup>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
That's expected behavior. PopUp intentionally has a highest z-index to display over all other elements. An easy fix, would be to get rid of the PopUp all together, and move {Binding IsPagesPopupOpen} down to the Grid inside it and use it on that Grid's Visibility with a Visibility Converter instead. Except it would need to be moved to the bottom so it would display above the contents.
To Explain better. Instead of how you have it, do this;
<DataTemplate x:Key="BrandItemTemplate">
<Grid HorizontalAlignment="Left" Width="180" Height="150" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" VerticalAlignment="Top"/>
<Border Visibility="{Binding IsNew,Converter={StaticResource BooleanToVisibilityConverter}}" VerticalAlignment="Top" Height="15" Width="25" Margin="5" Background="DarkGreen" CornerRadius="5" HorizontalAlignment="Right">
<TextBlock Text="NEW" FontSize="7" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold"/>
</Border>
<Grid Grid.Row="1" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Height="25">
<TextBlock Text="{Binding Title}" FontSize="12" AutomationProperties.Name="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" FontWeight="Medium"/>
<StackPanel Margin="0 -12 05 0" HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal">
<Image Source="/Assets/Icons/pagesIcon.png" Height="30">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="PagesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
<Image Source="/Assets/Icons/refIcon.png" Height="30" Margin="10 0 0 0">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding TappedCommand}" CommandParameter="ReferencesIcon"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</StackPanel>
</Grid>
<!-- We move it down here to ensure it appears over everything and without having to set a fixed z-index, and add your visibility converter -->
<Grid Width="180" Height="150" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"
Visibility="{Binding IsPagesPopupOpen, Converter={StaticResource BooleanToVisibilityConverter}}">
<ListView ItemsSource="{Binding PopupList}" Padding="8" ScrollViewer.VerticalScrollBarVisibility="Hidden" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="12" FontWeight="Medium"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="30"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<Image Source="/Assets/Icons/closeIcon.png" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="8">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:CallMethodAction MethodName="CloseIconTapped" TargetObject="{Binding Mode=OneWay}"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Image>
</Grid>
</Grid>
</DataTemplate>
My ListBox uses this DataTemplate to act on LeftDoubleClick:
<UserControl x:Class="X1.XPrep.GuiModuleJobSelection.Views.ContentJobSelectionView"
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:l="http://wpflocalizeextension.codeplex.com"
xmlns:Classes="clr-namespace:X1.XPrep.GuiModuleJobSelection.Models"
xmlns:ViewModels="clr-namespace:X1.XPrep.GuiModuleJobSelection.ViewModels"
l:LocalizeDictionary.DesignCulture="en"
l:ResxLocalizationProvider.DefaultAssembly="XPrep.GuiModuleJobSelection"
l:ResxLocalizationProvider.DefaultDictionary="Resources"
x:Name="jobSelectionContent"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance {x:Type ViewModels:ContentJobSelectionViewModel}, IsDesignTimeCreatable=True}"
d:DesignHeight="600" d:DesignWidth="328.5">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/XPrep.GuiCommon;component/Resources/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<DataTemplate x:Key="ListboxJobDataTemplate" DataType="{x:Type Classes:JobForJobSelectionViewModel}">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding JobData.JobName}"
VerticalAlignment="Top">
<TextBlock.ToolTip>
<StackPanel Height="200" MinWidth="200">
<StackPanel Width="200" Orientation="Vertical" >
<TextBlock Text="{Binding JobData.JobName}" FontWeight="Bold"/>
<Image VerticalAlignment="Top" Source="{Binding PreviewImageSource}" Margin="0,10,0,0"/>
<TextBlock Text="No preview image available." Margin="0,10,0,0">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsPreviewImageMissing}" Value="False">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="{Binding JobData.Comment}"/>
</StackPanel>
</StackPanel>
</TextBlock.ToolTip>
<TextBlock.InputBindings>
<MouseBinding Gesture="LeftDoubleClick"
Command="{Binding Path=DataContext.LoadCommand,
RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"/>
</TextBlock.InputBindings>
</TextBlock>
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListBox ItemsSource="{Binding Jobs, Mode=TwoWay}" IsSynchronizedWithCurrentItem="True"
SelectedItem="{Binding SelectedJob, Mode=TwoWay}" ItemTemplate="{DynamicResource ListboxJobDataTemplate}"
Grid.Column="1" Grid.Row="0" x:Name="listBoxJobNames" MinWidth="200"
HorizontalAlignment="Stretch" Margin="6" VerticalAlignment="Stretch">
<ListBox.InputBindings>
<KeyBinding Key="Delete" Command="{Binding Path=DataContext.DeleteCommand,
RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"/>
</ListBox.InputBindings>
</ListBox>
<StackPanel Grid.Column="0" Grid.Row="0" Margin="0" Width="100" Background="{DynamicResource ContextBackgroundBrush}">
<Button x:Name="jobSelectionNewButton" Content="{DynamicResource X1.Job.New}" ToolTip="{l:Loc JobSelection_Button_New}"
HorizontalAlignment="Left" Margin="6" VerticalAlignment="Top" Command="{Binding NewCommand}" IsDefault="True"
Style="{StaticResource GlossyButtonX1}"/>
<Button Content="{DynamicResource X1.Job.Load}" ToolTip="{l:Loc JobSelection_Button_Load}"
HorizontalAlignment="Left" Margin="6" VerticalAlignment="Top"
Style="{StaticResource GlossyButtonX1}"
Command="{Binding LoadCommand}"/>
<Button Content="{DynamicResource X1.Job.Rename}" ToolTip="{l:Loc JobSelection_Button_Rename}"
HorizontalAlignment="Left" Margin="6" VerticalAlignment="Top"
Style="{StaticResource GlossyButtonX1}"
Command="{Binding RenameCommand}"/>
<Button Content="{DynamicResource X1.Job.Clone}" ToolTip="{l:Loc JobSelection_Button_Clone}"
HorizontalAlignment="Left" Margin="6" VerticalAlignment="Top"
Style="{StaticResource GlossyButtonX1}"
Command="{Binding CloneCommand}"/>
<Button Content="{DynamicResource X1.Common.Delete}" ToolTip="{l:Loc JobSelection_Button_Delete}"
HorizontalAlignment="Left" Margin="6" VerticalAlignment="Top"
Style="{StaticResource GlossyButtonX1}"
Command="{Binding DeleteCommand}"/>
</StackPanel>
</Grid>
The double click only works on the actual text in the items line.
What can I do, to let the double click also work on the empty spaces to the right of my item text?
Regards
Rainer
Set ListBoxItems' HorizontalContentAlignment = Stretch.
For example:
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
In case, above code doesn't work, also try setting the Background of the Grid to Transparent (if you are using Grid):
<Grid Background="Transparent">
EDIT:
Bind TextBlock Width to ListBoxItem Width as shown below should fix the issue:
<TextBlock HorizontalAlignment="Left"
TextWrapping="Wrap"
Text="{Binding JobData.JobName}"
VerticalAlignment="Top"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=ActualWidth}">
I have a ListView of ToggleButtons. Every button is binded to a Popup window.
Every Popup window is being opened at the same place as the button, but I want it to be at the same place as the first button.
Here is the code and images:
The buttons:
This is what happens when the first button is open:
This is what happens when the second button is open:
<ListView x:Name="ListOfRecipes" HorizontalAlignment="Center" VerticalAlignment="Top" ItemsSource="{Binding}" Grid.Row="1" Margin="25,0.333,25,35" ScrollViewer.VerticalScrollMode="Enabled" Grid.RowSpan="5" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="90*" />
<RowDefinition Height="150*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ToggleButton x:Name="RecipeButton" Grid.Row="1" BorderBrush="#FF65C365" VerticalAlignment="Center" HorizontalAlignment="Center" Click="Button_Click" Height="150" Width="328" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Height="128" Width="328">
<Image Source="{Binding Path=ImageUri}" Height="128" Width="128" Margin="0,6,0,-5.667" />
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" Height="128" Width="192">
<TextBlock Height="25" Width="190" Foreground="#FF6FDC13" Text="{Binding Name}" VerticalAlignment="Top" />
<Image Name="YesOrNoImage" Source="{Binding Path=YesOrNoImage}" Width="102" Height="102" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=RecipeButton, Mode=TwoWay}" Height="0" Width="328" VerticalAlignment="Center" Name="PopupOne" IsLightDismissEnabled="True" IsHoldingEnabled="False" ScrollViewer.VerticalScrollMode="Enabled" Visibility="{Binding IsChecked, ElementName=RecipeButton}">
<Border BorderBrush="#FF65C365" BorderThickness="1" Background="White" Height="514" Width="328">
<ScrollViewer VerticalScrollMode="Enabled" >
<StackPanel Orientation="Vertical" ScrollViewer.VerticalScrollMode="Enabled">
<Image Source="{Binding Path=ImageUri}" Height="328" Width="328" />
<TextBlock Foreground="#FF6FDC13" Text="{Binding Name}" HorizontalAlignment="Left" FontSize="28" />
<TextBlock Foreground="Black" Text="{Binding RecipeText}" HorizontalAlignment="Left" FontSize="18" />
</StackPanel>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In the popup you can define a grid and set the popup height there
Something like this:
<Popup x:Name="resultsPopup"
AllowsTransparency="True"
IsOpen="{Binding IsResultsPopupOpen,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
Placement="Bottom"
PlacementTarget="{Binding ElementName=SearchBox}"
StaysOpen="False">
<Grid Width="{Binding ActualWidth,
ElementName=SearchBox}"
Height="300">
</Grid>
</Popup>
UPDATE:
You can place the popup wherever you want with the Placement property as shown above, the set the binding of the "PlacementTarget" to the control you want to bind.
In the example above the popup will be shown below the UI control named SearchBox