Develop Reference

Can't binding in ToolTip

I'm working with ToolTip in WPF C#. I want to bind an element property to ToolTip content, but the output is empty. Initially, I used the binding below, and it did not work.
Content="{Binding ElementName=txtf1, Path=Text}"
So I found related solutions here, but the result did not change. Can anyone point me where I'm going wrong?
<StackPanel Height="Auto" Margin="15,10,15,0" Width="74">
<Image Source="/Image/AutoCAD.png" Width="50"/>
<TextBlock x:Name="txtf1" Text="Border19072021 Border19072021"/>
<StackPanel.ToolTip>
<ToolTip DataContext="{Binding Path=PlacementTarget.DataContext ,
RelativeSource={RelativeSource Self}}">
<Label Content="{Binding ElementName=txtf1, Path=Text}"/>
</ToolTip>
</StackPanel.ToolTip>
</StackPanel>

[...] initially, I use Content="{Binding ElementName=txtf1, Path=Text}" and it not work.
Yes, that is because each window in WPF has its own visual tree with elements and a ToolTip and other popups are actually displayed in a separate window. ElementName bindings do not work here (RelativeSource too), since these are different XAML namescopes.
The question you cited is the right approach, but you applied it the wrong way. In theory you can use the DataContext property as binding indirection for the ToolTip, but you should not.
<StackPanel DataContext="{Binding Text, ElementName=txtf1}" Height="Auto" Margin="15,10,15,0" Width="74">
<Image Source="/Image/AutoCAD.png" Width="50"/>
<TextBlock x:Name="txtf1" Text="Border19072021 Border19072021"/>
<StackPanel.ToolTip>
<ToolTip DataContext="{Binding Path=PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}">
<Label Content="{Binding}"/>
</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
The above code works, but the DataContext property serves a core purpose in WPF for data binding. Do not abuse this property for this purpose or you break data-binding down the visual tree. Apart from that, the binding on Label and ToolTip is redundant, as you can see below. There is another property called Tag that you can assign any value to.
Gets or sets an arbitrary object value that can be used to store custom information about this element.
<StackPanel Tag="{Binding Text, ElementName=txtf1}" Height="Auto" Margin="15,10,15,0" Width="74">
<Image Source="/Image/AutoCAD.png" Width="50"/>
<TextBlock x:Name="txtf1" Text="Border19072021 Border19072021"/>
<StackPanel.ToolTip>
<ToolTip>
<Label Content="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}"/>
</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
You can use a RelativeSource binding to refer to the ToolTip.Tag directly from the label. If there are multiple bindings like this, you could consider creating custom attached properties for each of them and bind them the same way.

I reference here, How to binding other element in ToolTip
You have not carefully read the topic you are referring to.
ToolTip, ContextMenu, Popup (and some other elements) pop up over the contents of the Window without changing it.
Think for yourself: How can you introduce new elements into a Window without changing the visual tree of this Window?
Answer: this cannot be done in any way.
Therefore, these pop-up elements are implemented as the contents of a new small Window shown above the main Window (the one in which they were called).
And since these are DIFFERENT Windows, they have different visual trees.
Therefore, it is impossible to find elements from the main Window in the tree of the Pop-up Window (Bindings of the ElementName and FindAncestor types).
You can use an element reference (Binding Sourse = {x: Reference ...}), since references are resolved at compile time and without regard to the visual tree.
Example:
<StackPanel Height="Auto" Margin="15,10,15,0" Width="74">
<Image Source="/Image/AutoCAD.png" Width="50"/>
<TextBlock x:Name="txtf1" Text="Border19072021 Border19072021"/>
<StackPanel.ToolTip>
<ToolTip>
<Label Content="{Binding Source={x:Reference txtf1}, Path=Text}"/>
</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
In addition, the Popup's DataContext inherits from the element in which It is created.
In your case, this is from StackPanel.
Therefore, you can simply set the default Bindings to receive data.
Example:
<StackPanel Height="Auto" Margin="15,10,15,0" Width="74">
<Image Source="/Image/AutoCAD.png" Width="50"/>
<TextBlock x:Name="txtf1" Text="{Binding SomeViewModelProperty}"/>
<StackPanel.ToolTip>
<ToolTip>
<Label Content="{Binding SomeViewModelProperty}"/>
</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
The PlacementTarget property is used to change the target element for the popup.
DataContext inherits from this element.
If it is not specified, the DataContext is inherited from the element in which the flyout is specified.
You don't specify it, so it is null, which is what your binding returns.
Example:
<StackPanel DataContext="{Binding Text, ElementName=txtf1}" Height="Auto" Margin="15,10,15,0" Width="74">
<Image Source="/Image/AutoCAD.png" Width="50"/>
<TextBlock x:Name="txtf1" Text="{Binding SomeViewModelProperty}"/>
<StackPanel.ToolTip>
<ToolTip PlacementTarget="{Binding ElementName=txtf1}"
DataContext="{Binding Path=PlacementTarget.DataContext,
RelativeSource={RelativeSource Self}}">
<Label Content="{Binding SomeViewModelProperty}"/>
</ToolTip>
</StackPanel.ToolTip>
</StackPanel>

Weird issue with WPF TreeView when using mouse wheel to scroll

So, I've been working on a legend for our map using a WPF treeview to display the groups and layers.
I've gotten it working and displaying just fine, but when I scroll the treeview with the mousewheel, the control starts flickering and the vertical scrollbar for the tree keeps resizing up and down.
The treeview layout is like this:
Group
Layer
Layer sub items
Layer
Layer sub items
Layer
Layer sub items
Group
Layer
etc...
The Group and Layer nodes are tree view items, but the layer sub items are contained within an items control. The layer sub items are not meant to be expanded/contracted, or selected and thus must remain static under the layer node, thus the items control seemed like a sensible choice.
When I scroll with the mouse wheel all the way to the top or bottom of the tree view, the scrollbar starts flicking and resizing, the last few elements of the items control flickers in and out of view (when it shouldn't be in view at all), and sometimes, the tree view will actually scroll back and forth.
If I remove the items control, everything works as it's supposed to. And when I add it back in, it messes up.
Also, if I grab the scroller thumb with the mouse and drag it, everything works fine. No jumping around.
Here's the resource XAML for the control:
<views:DynamicLegendNodeTemplateSelector x:Key="LegendTemplateSelector">
<views:DynamicLegendNodeTemplateSelector.GroupTemplate>
<HierarchicalDataTemplate DataType="{x:Type legend:IDynamicMapLegendGroup}">
<HierarchicalDataTemplate.ItemsSource>
<MultiBinding Converter="{StaticResource LegendNode}">
<Binding Path="Groups"/>
<Binding Path="LegendLayers"/>
</MultiBinding>
</HierarchicalDataTemplate.ItemsSource>
<Grid>
<StackPanel Orientation="Horizontal">
<CheckBox Focusable="False" IsChecked="{Binding IsVisible}" VerticalAlignment="Center">
<TextBlock Text="{Binding DisplayName}" VerticalAlignment="Center"/>
</CheckBox>
</StackPanel>
</Grid>
</HierarchicalDataTemplate>
</views:DynamicLegendNodeTemplateSelector.GroupTemplate>
<views:DynamicLegendNodeTemplateSelector.LayerTemplate>
<HierarchicalDataTemplate DataType="{x:Type legend:IDynamicMapLayerLegendItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CheckBox Grid.Row="0" Focusable="False" IsChecked="{Binding IsVisible}" VerticalAlignment="Center">
<TextBlock Text="{Binding LayerCaption}" VerticalAlignment="Center"/>
</CheckBox>
<ItemsControl Grid.Row="1"
Margin="16,0,0,0"
BorderThickness="0"
Background="Transparent"
ItemsSource="{Binding LegendItems, IsAsync=True}"
HorizontalAlignment="Left"
HorizontalContentAlignment="Left"
MouseWheel="ItemControls_MouseWheel"
ScrollViewer.CanContentScroll="False"
MouseUp="ItemsControl_MouseUp">
<ItemsControl.Template>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="20" Height="20" Stretch="UniformToFill" Source="{Binding Symbol}"/>
<Label Grid.Column="1" Content="{Binding Label}"/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</HierarchicalDataTemplate>
</views:DynamicLegendNodeTemplateSelector.LayerTemplate>
</views:DynamicLegendNodeTemplateSelector>
<Style x:Key="TreeItemStyle" TargetType="TreeViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<EventSetter Event="MouseUp" Handler="TreeViewItem_MouseUp"></EventSetter>
</Style>
And here's the treeview:
<TreeView x:Name="LegendHierarchy"
MinWidth="200"
ItemsSource="{Binding LegendItems, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:DynamicArcGisRuntimeMapLegendView}}}"
ItemContainerStyle="{StaticResource TreeItemStyle}"
ItemTemplateSelector="{StaticResource LegendTemplateSelector}" />
This code is using .NET 4.5 in Visual Studio 2015 if that matters.
Regardless, does anyone know what might be causing the problem?
Thanks

So, it goes to show that an attempt at a good nights sleep is helpful.
Apparently, all I had to do was set
VirtualizingPanel.VirtualizationMode="Recycling"
On the treeview control and it starting working.
Here's the full tree view XAML:
<TreeView x:Name="LegendHierarchy"
MinWidth="200"
ItemsSource="{Binding LegendItems, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:DynamicArcGisRuntimeMapLegendView}}}"
ItemContainerStyle="{StaticResource TreeItemStyle}"
ItemTemplateSelector="{StaticResource LegendTemplateSelector}" UseLayoutRounding="True" ScrollViewer.CanContentScroll="True" HorizontalContentAlignment="Stretch"
VirtualizingPanel.VirtualizationMode="Recycling"/>
I hope this helps others.

Setting bind-values when adding ListviewItems in XAML

I'm sorry if the title is a bit, off. Did not know what to call it really.
But here is my question:
I have a ListView with a custom ItemsTemplate, which has a Textblock and an Image. Both of which are set to get their data from binds.
But here is what I'm wondering:
If I want to add listviewItems from XAML:
<ListView HorizontalAlignment="Left" Width="150" ItemTemplate="{DynamicResource menuItems}" ItemsPanel="{DynamicResource menuLayout}">
<ListViewItem/> <---- Here
<ListViewItem/> <---- And here.
</ListView>
How can I set what values the textblock and image should have?
<ListViewItem "TextBlockValue = asdasdasds"/> etc
Here's the Itemtemplate
<DataTemplate x:Key="menuItems">
<Grid Width="150" Height="35">
<Image Height="35" Width="35" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding Path=Text}" Margin="40,0,0,0" VerticalAlignment="Center" FontSize="15" FontWeight="Light" Foreground="White"/>
</Grid>
</DataTemplate>

Simple and most flexible solution
As a first step, a class should be defined which serves as data container for all values of one ListViewItem.
public class ItemData
{
public ImageSource ImageSource { get; set; }
public string Text { get; set; }
}
(Technically, one could also do it also without such a custom class; however, the resulting XAML will look much more convoluted and much less readable.)
The data template with the bindings to the properties of ItemData elements could look like this:
<DataTemplate x:Key="menuItems">
<StackPanel Width="150" Height="35" Orientation="Horizontal">
<Image Source="{Binding Path=ImageSource}" Height="35" Width="35" />
<TextBlock Text="{Binding Path=Text}" Margin="5,0,0,0" VerticalAlignment="Center" FontSize="15" FontWeight="Light" Foreground="White"/>
</StackPanel>
</DataTemplate>
In the XAML of the ListView, a collection of ItemData objects will be constructed and assigned to the ListView.Items property. The ListView will create the ListViewItems accordingly.
<ListView HorizontalAlignment="Left" Width="150" ItemsPanel="{DynamicResource menuLayout}" ItemTemplate="{StaticResource menuItems}">
<ListView.Items>
<My:ItemData ImageSource="x:\\path\\to\\Img_1.png" Text="Alpha" />
<My:ItemData ImageSource="x:\\path\\to\\Img_2.png" Text="Beta" />
</ListView.Items>
</ListView>
Solution with explicit ListViewItem declarations
The question sounds like a solution with explicit declarations of ListViewItems is sought.
However, this should not really be the recommended approach, as it will only lead to more convoluted XAML for achieving exactly the same result as the first solution, as demonstrated now.
In the XAML of the ListView, each ListViewItem together with the appropriate ItemData object will be constructed, and also the data template will be assigned to ListViewItem.ContentTemplate (ListView.ItemTemplate won't work here, since the ListViewItems are not created by the ListView).
<ListView HorizontalAlignment="Left" Width="150" ItemsPanel="{DynamicResource menuLayout}">
<ListViewItem ContentTemplate="{StaticResource menuItems}">
<ListViewItem.Content>
<My:ItemData ImageSource="x:\\path\\to\\Img_1.png" Text="Alpha" />
</ListViewItem.Content>
</ListViewItem>
<ListViewItem ContentTemplate="{StaticResource menuItems}">
<ListViewItem.Content>
<My:ItemData ImageSource="x:\\path\\to\\Img_2.png" Text="Beta" />
</ListViewItem.Content>
</ListViewItem>
</ListView>
If specifying the ContentTemplate for each single ListViewItem is not desired, a ListViewItem Style setting the ListViewItem.ContentTemplate property can be defined in the ListView's resource dictionary:
<ListView HorizontalAlignment="Left" Width="150" ItemsPanel="{DynamicResource menuLayout}">
<ListView.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="ContentTemplate" Value="{StaticResource menuItems}" />
</Style>
</ListView.Resources>
<ListViewItem>
<ListViewItem.Content>
<My:ItemData ImageSource="x:\\path\\to\\Img_1.png" Text="Alpha" />
</ListViewItem.Content>
</ListViewItem>
<ListViewItem>
<ListViewItem.Content>
<My:ItemData ImageSource="x:\\path\\to\\Img_2.png" Text="Beta" />
</ListViewItem.Content>
</ListViewItem>
</ListView>
The style being defined inside the ListView's resource dictionary prevents any other ListViewItem control outside of this ListView from accidentally picking up this style.
Comparing the simplicity of the first solution with the verbosity of the second, it is obvious that explicit declarations of ListViewItems in XAML is not a recommended approach.

Get TabItem Name in UserControl

I have the following code that creates a TabControl. Each tab contains a UserControl (code is below) that displays different data (one shows Local tax info and the other show Fed/State tax info).
TabControl
<TabControl
Name="MappingTabs"
Margin="6,7,7,8" Padding="6"
Background="White" >
<TabItem
Name="LocalTaxTab"
Padding="6,1"
Header="Local">
<AdornerDecorator>
<DockPanel>
<Border Margin="7">
<GroupBox
Name="LocalTaxesGroup">
<GroupBox.Header>
<TextBlock
FontWeight="Bold"
Text="Local Taxes">
</TextBlock>
</GroupBox.Header>
<StackPanel Margin="20,8,10,0"
Orientation="Vertical">
<local:TaxCodeMappingHeader />
<!-- Note that a row is 25 high, -->
<ScrollViewer
MaxHeight="250"
>
<ItemsControl
Name="LocalTaxCodeMappingControl"
ItemTemplate="{StaticResource MappingRuleTemplate}"
BorderThickness="0"
AlternationCount="2"
IsTextSearchEnabled="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding TaxCodesCollection[0].CodeCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}">
<!-- ItemsSource="{Binding Source={StaticResource sortedCodeCollection}}"> -->
</ItemsControl>
</ScrollViewer>
<local:TaxCodeMappingFooter DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</StackPanel>
</GroupBox>
</Border>
</DockPanel>
</AdornerDecorator>
</TabItem>
<TabItem
Name="FedStateTaxesTab"
Padding="6,1"
Header="Federal\State">
<AdornerDecorator>
<DockPanel>
<Border Margin="7">
<GroupBox
Name="FedStateTaxesGroup">
<GroupBox.Header>
<TextBlock
FontWeight="Bold"
Text="Federal \ State Taxes">
</TextBlock>
</GroupBox.Header>
<StackPanel Margin="20,8,10,0"
Orientation="Vertical">
<local:TaxCodeMappingHeader />
<!-- Note that a row is 25 high, -->
<ScrollViewer
MaxHeight="250"
>
<ItemsControl
Name="FedStateTaxCodeMappingControl"
ItemTemplate="{StaticResource MappingRuleTemplate}"
BorderThickness="0"
AlternationCount="2"
IsTextSearchEnabled="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding TaxCodesCollection[1].CodeCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}">
<!-- ItemsSource="{Binding Source={StaticResource sortedCodeCollection}}"> -->
</ItemsControl>
</ScrollViewer>
<local:TaxCodeMappingFooter DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</StackPanel>
</GroupBox>
</Border>
</DockPanel>
</AdornerDecorator>
</TabItem>
</TabControl>
</StackPanel>
UserControl (TaxCodeMappingFooter)
<Button
Name="AddButton"
Grid.Row="0"
Grid.Column="0"
Height="20" Width="20"
Command="{Binding Path=DataContext.AddClickCommand}"
CommandParameter="(want the tab name here)"
Style="{StaticResource ImageButton}"
ToolTip="Add a rule"
local:AttachedImage.Image="{StaticResource AddImageSource}" />
The UserControl (TaxCodeMappingFooter) contains an Add button that I need to wire up via RelayCommand to the VM. I need to somehow tell the VM which tab is calling the Add command so that an item can be added to the correct collection. I thought about sending the TabName and then keying off that to know which tab the user is on.
Is my idea correct or is the a better way to do this and if it is correct how do I get the TabName value to pass it back as a CommandParameter?

If you are going to hard code your UI controls as you have done, then perhaps your simplest option is to define a string DependencyProperty in your TaxCodeMappingFooter control:
public static readonly DependencyProperty TabNameProperty = DependencyProperty.
Register("TabName", typeof(string), typeof(TaxCodeMappingFooter));
public string TabName
{
get { return (string)GetTabName(TabNameProperty); }
set { SetTabName(TabNameProperty, value); }
}
Then you could set it from your TabItems:
<local:TaxCodeMappingFooter TabName="FedStateTaxesTab" DataContext="{Binding
RelativeSource={RelativeSource AncestorType=UserControl}}" />
And Bind to it from inside your control:
<Button Name="AddButton" Command="{Binding Path=DataContext.AddClickCommand}"
CommandParameter="{Binding TabName, RelativeSource={RelativeSource
AncestorType=TaxCodeMappingFooter}}" ... />

As others have said, if you model your view model structure appropriately, this would not be much of an issue.
If you really want to bind against an ancestor element, you can use a RelativeSource of FindAncestor, then specify the AncestorType. Note that you may need to tweak AncestorLevel if you are the descendant of more than one TabItem.
{Binding Path=Name
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabItem}}}
(wrapping added for clarity)

MVVM nested list scrolling

I'm currently working on a data driven editing tool that was written in WPF using MVVM. The primary display is a scrollable list of view models, some (not all) of which have inner lists of their own child view models (not scrollable). The problem is that one of the view model types is an array type that includes functionality to add a new child item and we want to make it so that if you use that, it then scrolls the overall list to that new item. Is there a reasonable way to do this using MVVM?
To give you an idea of how this UI is currently set up, this is the overall display:
<Grid ScrollViewer.VerticalScrollBarVisibility="Auto">
<Label Content="{Binding Path=DisplayName}" Height="28" HorizontalAlignment="Left" Margin="4,4,0,0" VerticalAlignment="Top" />
<ItemsControl IsTabStop="False" ItemsSource="{Binding Path=VMEntries}" Margin="12,25,12,12" ItemTemplateSelector="{StaticResource EntryTemplateSelector}" ScrollViewer.VerticalScrollBarVisibility="Auto">
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer x:Name="ScrollViewer">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</Grid>
and this is the data template for the array entry that we're working with:
<DataTemplate x:Key="Array">
<Grid Margin="2,7,0,0">
<Label Content="{Binding Path=DisplayName}" ToolTip="{Binding Path=Tooltip}"/>
<Button Content="Add" HorizontalAlignment="Right" VerticalAlignment="Top" Height="24" Width="24" Command="{Binding Path=AddCommand}"/>
<ItemsControl HorizontalAlignment="Stretch" IsTabStop="False" ItemsSource="{Binding Path=SubEntries, NotifyOnSourceUpdated=True}" Margin="10,24,0,0" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Name="RemoveButton" Grid.Column="0" Margin="0,5,0,0" Content="Del" HorizontalAlignment="Right" VerticalAlignment="Top" Height="24" Width="24" Command="{Binding Path=RemoveCommand}" CommandParameter="{Binding Path=.}"/>
<ContentControl Grid.Column="1" Content="{Binding Path=.}" ContentTemplateSelector="{StaticResource EntryTemplateSelector}" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=RemoveHandler}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="RemoveButton" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</DataTemplate>

The MVVM ideal is not adding code behind, but for some complicated things the easier way is to add it. For several cases if you want add complicated behaviors on your application and keeping the MVVM, an alternative is use the Behaviors (c# codes that allows be used and binds from XAML). Also you could define behaviors using AttachedProperties and register to the PropertyChanged event. And another alternative is to create a UserControl and add the code behind to it.
In your particular case, the inner collection must raise some event when add items to it, and then in your outer collection execute something like this list.ScrollIntoView(itemToScroll);. Hope this could give some tips to go on.