Develop Reference

Remove hover effect on parent listbox item on hover of child listbox item WPF

I have started learning the WPF. I am facing the problem regarding hover effect on the list box.
I have used the list box control. Inside that control, I have added toggle button and On toggle button click I have bound the other list box.
Say,
Listbox -> Toggle button -> Listbox
I would like to remove parent (Name) list box item boarder hover effect when I hover over the title.
I have searched a lot but didn't found any hits how can remove parent hover effect from child element.
Here is the code that I have used for that.
<StackPanel.Resources>
<converters:BooleanToHiddenVisibility x:Key="boolToVis"/>
</StackPanel.Resources>
<ListBox ItemsSource="{Binding Items}" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource NullSelectionStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<VirtualizingStackPanel>
<ToggleButton Name="checkViewTextBox" >
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<TextBlock Name="Text" Text="{Binding Title}" HorizontalAlignment="Center" MinWidth="30"/>
</Grid>
<Grid Grid.Row="0" Grid.Column="1">
<Image Source="C:\Work\Temp_Olotech\ToggleButton\ToggleButton\Tick_Mark_Dark-512.png" Height="20" Width="20"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<ListBox ItemsSource="{Binding InnerItem}" Visibility="{Binding Path=IsChecked, ElementName=checkViewTextBox,
Converter={StaticResource boolToVis}}" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="200">
<ListBox.ItemTemplate>
<DataTemplate>
<VirtualizingStackPanel CanVerticallyScroll="True">
<Expander Header="Title">
<VirtualizingStackPanel>
<TextBlock Text="{Binding Name}"></TextBlock>
</VirtualizingStackPanel>
</Expander>
</VirtualizingStackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</VirtualizingStackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox Text="only seen when above checkbox is checked"
Visibility="{Binding Path=IsChecked, ElementName=checkViewTextBox, Converter={StaticResource boolToVis}}"/>
</StackPanel>
</Grid>
Thank you for the help!

c# wpf binding not working with datacontexts

I wish to display a ToolTip for an entry in a Listbox.
The Toolkit will contain a Textbox and a copy (larger) of the Image in the entry in the Listbox
I can get either the Text in the Textbox Or the Image to display.
The code which displays the image but not the text is
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="#EEFFFFFF" BorderBrush="#FFCCCCCC"
HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="1">
<Grid>
<StackPanel Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Image x:Name="img" ToolTipService.Placement="Top"
Source="{Binding Path=ImageUri}" Height="64" Stretch="Uniform" Width="64">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTrans"/>
</TransformGroup>
</Image.RenderTransform>
<Image.ToolTip>
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center" Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
This code is part of the code for which is used by a ListBox
The code below (as in the list above display the Image in the tooltip but not the Textbox
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center"Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
If you remove
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}" from <ToolTip
The Text works as expected but the Image now fails (as expected)
I have tried to
a) modify the original so the TextBlock binding point to the FTitle entry observable Collection driving the listbox entries
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=DataContext.FTitle, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
b) moved the datacontext in to Image
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=DataContext.Source, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Image}}}"/>
</Border>enter code here
Neither worked. (I did try many variations But none worked.
I would be grateful for either solution

{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}} will bind the UIElement (a ListBoxItem) as the DataContext for the tooltip. It seems you want the DataContext of the ListBoxItem in order to bind to properties of the underlying model. In which case, try changing your DataContext binding to be: {Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}

Ability to click on a button as part of a background style WPF

I have a ListBox that sometimes contains no items. If this ListBox contains no items, then a watermark and a notification in the form of a button with a tool tip will be displayed. I originally had the button at the bottom right corner of my screen. But it was requested I move the button to a more central location, specifically just below the watermark in the ListBox. I moved the button to the background of the ListBox initially but that did not work because I was unable to get the tool tip or press the button. My question is: Is there a way to have the button function properly on the background of the ListBox.
Style:
<VisualBrush x:Key="WatermarkStyle" Stretch="None" AlignmentX="Center" AlignmentY="Center">
<VisualBrush.Visual>
<Grid>
<Button
Margin="0,50,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ReloadCommand}"
ToolTip="{Binding Path=NotificationTip}"
Visibility="{Binding Path=ShowNotification,
Converter={StaticResource TrueToVisibleConverter}}"
Style="{StaticResource StaticStyle}"
IsEnabled="{Binding Path=CanReload}">
<Image Source="{Binding Path=NotificationIcon}" Stretch="Uniform" Width="35"/>
</Button>
<TextBlock FontFamily="SEGOEWP" FontSize="22" FontWeight="Normal" HorizontalAlignment="Center"
VerticalAlignment="Center" Foreground="Gray" Opacity="1" Text="{Binding BackgroundWatermark}"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
ListBox:
<ListBox x:Name="ListBox"
Grid.Row="2"
Grid.ColumnSpan="3"
BorderThickness="1"
ItemsSource="{Binding Path=ListView}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
SelectedItem="{Binding SelectedDevice}"
SelectionMode="Single">
<ListBox.Style>
<Style TargetType="{x:Type ListBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding HasItems, RelativeSource={RelativeSource Self}}" Value="False">
<Setter Property="Background" Value="{StaticResource WatermarkStyle}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.Style>

how to select using a wrap panel as the item panel for listview

I want to show a list of items horizontally and be able to select from this list of items - I have tried using a listview and changing the item template per some posts on stack and I have this:
<ListView Height="Auto" HorizontalAlignment="Left" Margin="24,0,0,0" Name="MachinesListView" VerticalAlignment="Top" Width="1455" Background="#FFF0F0F0" ItemsSource="{Binding Machines}" BorderBrush="#FFF0F0F0" Grid.ColumnSpan="2" Grid.Row="2" SelectionChanged="MachinesListView_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Height" Value="175"/>
<Setter Property="Width" Value="275"/>
<Setter Property="Margin" Value="5,5,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="10">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Machine.MachineId}" TextAlignment="Center" Width="Auto" Foreground="#FF639A70" FontSize="19"/>
<TextBlock Text="{Binding Machine.Name}" TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" />
<Image Source="/URM;component/Images/slot_machine-512.png" Height="60" Width="60" />
<TextBlock Text="{Binding Machine.Description}" TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0"/>
<TextBlock TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0">
<Run Text ="Actual: "/>
<Run Text ="{Binding Actual, StringFormat=' {0:c}'}"/>
</TextBlock>
<TextBlock TextAlignment="Center" Width="Auto" Foreground="Gray" FontSize="15" Margin="0, 5, 0, 0">
<Run Text ="OverShort: "/>
<Run Text ="{Binding OverShort, StringFormat=' {0:c}'}"/>
</TextBlock>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
This works well...I get the overall look and feel that I want from this but only selecting the first item causes the selectionchanged event to fire...
I thought about implementing the items as buttons instead but I thought there might be a more proper way of dealing with this.

Set Background to Transparent on outer most border of ControlTemplate.
<Border BorderBrush="Gray" Background="Transparent"
BorderThickness="2" CornerRadius="10">
By default it's {x:Null} which is not responsive to mouse events.
You will see that item gets selected only in case you click over image
or any control present in template but when you click on empty area
within border, selectionChange event doesn't fire since it is
unresponsive to mouse events (specifically MouseClick in your case). Setting background to Transparent will make it responsive to all mouse events.
Refer to this for more details - {x:Null} Vs. Transparent.

Tooltip style. Can't bind to datacontext

i have one problem with tooltip.
I want to add templated tooltip to button with some information inside.
Here the button with tooltip, which datacontext bounded to some viewmodel:
<fluent:Button DataContext="{Binding NewConnections, Source={StaticResource Locator}}" Command="{Binding AddCloudStorageAccount}" Header="Add Account">
<fluent:Button.LargeIcon>
<Image Source="pack://application:,,,/Icons;component/UI/v1/add_account.png" Width="48"/>
</fluent:Button.LargeIcon>
<fluent:Button.ToolTip>
<ToolTip DataContext="{Binding UserInput.AddAccountsButtonInfo, Source={StaticResource Locator}}" Style="{StaticResource ButtonTooltip}"></ToolTip>
</fluent:Button.ToolTip>
</fluent:Button>
Style:
<Style TargetType="ToolTip" x:Key="ButtonTooltip">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="LightYellow" BorderThickness="0.5" BorderBrush="Maroon">
<StackPanel Orientation="Vertical" Margin="3">
<TextBlock x:Name="_txtText" Text="{Binding Title}"></TextBlock>
<TextBlock x:Name="_txtDescription" Margin="0 10 0 0" Text="{Binding Description}"></TextBlock>
<TextBlock x:Name="_txtHotKeyDescription" Margin="0 10 0 0" Text="{Binding HotKeyDescription}"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I set some breakpoints to see if viewmodel is accessed. And it's ok. But properties like Title not accessed at all and i see only empty rectangle without any text
Do someone have some ideas?

Just resolved it(set datacontext in border). Maybe someone will be interested in:
<Style TargetType="ToolTip" x:Key="ButtonTooltip">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="LightYellow" BorderThickness="0.5" BorderBrush="Maroon" DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToolTip}}}">
<StackPanel Orientation="Vertical" Margin="3">
<TextBlock x:Name="_txtText" Text="{Binding Title}"></TextBlock>
<TextBlock x:Name="_txtDescription" Margin="0 10 0 0" Text="{Binding Description}"></TextBlock>
<TextBlock x:Name="_txtHotKeyDescription" Margin="0 10 0 0" Text="{Binding HotKeyDescription}"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>