wpf binding when using datatemplate - wpf

ok currently i have this piece of code:
<TabItem Style="{DynamicResource MyStyle" x:Name="TabCustomers" Padding="0,1,4,1"
Header={Binding Path=customersHeader}/>
Now i want to add an icon there so I do (by removing the header above):
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Stretch="UniformToFill" Source="{StaticResource customers}"/>
<TextBlock x:Key="textblock" Margin="4,0,0,0"
Text="{Binding Path=customersHeader}"/>
</StackPanel>
</TabItem.Header>
So far it's ok.
I would like to generalize this using a datatemplate. I assume i have to do this in my resource dictionary:
<DataTemplate x:Key="TabItemCustomersTemplate" DataType="{x:Type TabItem}">
<StackPanel Orientation="Horizontal">
<Image Stretch="UniformToFill" Source="{StaticResource customers}"/>
<TextBlock x:Key="textblock" Margin="4,0,0,0"
Text="{Binding Path=customersHeader}"/>
</StackPanel>
</DataTemplate>
and change this in my tabitem declaration:
<TabItem ... HeaderTemplate="{StaticResource TabItemCustomersTemplate}".../>
So i run into the following issues and questions:
1) binding doesnt work, why?
2) how can i access textblock from c#?
3) how can i generalize this so i dont have to copy this over and over again for different tab items (or other controls for the matter) so that i can pass my own text and image source each time? For example you might use this to create an image button and if you have 20 buttons the code becomes messy.
Any ideas?
Thank you.

if you template the header in a
tabitem, you do not need to set the
data type of the template. the
header is a property of the tab
item, it is actually a property of
type object, you can put anything in
there.
try removing the DataType="{x:Type
TabItem}" and see if it works.
you should not need to access the
textblock from c#, you should make
do with the binding system. place a
custom object in your header. then
bind this object to your textblock
then adjust the object and it will
manipulate the textblock. getting at
an element is always hard if it is
contained in a data template. you
should not need to. if you find
yourself walking the visual tree to
find a visual element you are doing
things the hard way
you can generalise this by following
suggestion 2, using a custom object,
removing the x:Key of your data
template and setting its DataType to
be the type of your custom object.
then wherever your custom object
appears you will get it data
templated properly

Try this, This is working for me
<Window.Resources>
<!-- <BitmapImage x:Key="customers" UriSource="einstein.jpg"/>-->
<DataTemplate x:Key="TabItemCustomersTemplate">
<StackPanel Orientation="Horizontal">
<Image Stretch="UniformToFill" Source="{Binding Path=Customers}"/>
<TextBlock Margin="4,0,0,0" x:Name="txt" Text="{Binding Path=CustomersHeader}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<TabControl Name="mytabcontrol">
<TabItem x:Name="TabCustomers" Padding="0,1,4,1" Header="{Binding}" HeaderTemplate="{StaticResource TabItemCustomersTemplate}">
<Label Content="myContent" Background="Red"/>
</TabItem>
</TabControl>
</Grid>
in code behind
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
var lst = new List<People>();
lst.Add(new People() { CustomersHeader = "My Customer" });
this.DataContext = lst;
}
}
public class People
{
public string CustomersHeader { get; set; }
public BitmapImage Customers { get; set; }
}
Further you can find your textblock in code behind using this
TabPanel tabPanel = GetVisualChild<TabPanel>(mytabcontrol);
if (tabPanel != null)
{
foreach (UIElement element in tabPanel.Children)
{
TabItem tabItem = element as TabItem;
var image = FindNameFromHeaderTemplate<TextBlock>(tabItem, "txt");
}
}
public static T FindNameFromHeaderTemplate<T>(TabItem tabItem, String name) where T : UIElement
{
if (tabItem == null)
{
throw new ArgumentNullException("container");
}
if (tabItem.HeaderTemplate == null)
{
return null;
}
ContentPresenter contentPresenter = GetVisualChild<ContentPresenter>(tabItem);
if (contentPresenter == null)
{
return null;
}
T element = tabItem.HeaderTemplate.FindName(name, contentPresenter) as T;
return element;
}
public static T GetVisualChild<T>(Visual referenceVisual) where T : Visual
{
Visual child = null;
for (Int32 i = 0; i < VisualTreeHelper.GetChildrenCount(referenceVisual); i++)
{
child = VisualTreeHelper.GetChild(referenceVisual, i) as Visual;
if (child != null && child.GetType() == typeof(T))
{
break;
}
else if (child != null)
{
child = GetVisualChild<T>(child);
if (child != null && child.GetType() == typeof(T))
{
break;
}
}
}
return child as T;
}

Related

WPF How to find a specific control in an ItemsControl with data binding

I have an ItemsControl which is bound to a list:
<ItemsControl x:Name="icFiles" ItemsSource="{Binding Path=files}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Content="" IsChecked="{Binding IsChecked, Mode=TwoWay}" />
<TextBlock x:Name="ThisTextBlock" Text="{Binding FileName}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
private readonly List<FileModel> files = new();
icFiles.ItemsSource = files;
I want to highlight certain text in the TextBlock in the ItemsControl. For this, I thought about using a TextPointer:
string? highlightText = "blue";
int highlightTextIndex = ThisTextBlock.Text.IndexOf(highlightText);
if(highlightTextIndex >= 0)
{
TextPointer textStartPointer = ThisTextBlock.ContentStart.DocumentStart.GetInsertionPosition(LogicalDirection.Forward);
TextRange? highlightTextRange = new TextRange(textStartPointer.GetPositionAtOffset(highlightTextIndex), textStartPointer.GetPositionAtOffset(highlightTextIndex + highlightText.Length));
highlightTextRange.ApplyPropertyValue(TextElement.BackgroundProperty, Brushes.Blue);
}
}
How do I find this ThisTextBlock?
You need to access the item container's content template (which is the item's DataTemplate).
In case of the ItemsControl, you can use the following example to obtain a named element from the DataTemplate:
for (int itemIndex = 0; itemIndex < this.ItemsControl.Items.Count; itemIndex++)
{
var itemContainer = this.ItemsControl.ItemContainerGenerator.ContainerFromIndex(itemIndex) as ContentPresenter;
var textBlock = itemContainer.ContentTemplate.FindName("ThisTextBlock", itemContainer) as TextBlock;
HighlightText(textBlock);
}
A simple implementation that searches an element in the visual tree can be found at How to: Microsoft Docs: How to: Find DataTemplate-Generated Elements. You can copy and use the example's helper method FindVisualChild to search for elements by type rather than by name. The method is part of an example that shows how to get the content of the DataTemplate in case you use a ListBox or ListView.
In case you didn't modified the ListBoxItem template or don't expect it to change, you can use this simplified and faster version (to find named elements):
for (int itemIndex = 0; itemIndex < this.ListBox.Items.Count; itemIndex++)
{
var listBoxItemContainer = this.ListBox.ItemContainerGenerator.ContainerFromIndex(itemIndex) as ListBoxItem;
var templateRootBorder = VisualTreeHelper.GetChild(listBoxItemContainer, 0) as Border;
var contentHost = templateRootBorder.Child as ContentPresenter;
var textBlock = contentHost.ContentTemplate.FindName("TD", contentHost) as TextBlock;
}
Except for special use cases, it is highly recommended to use the ListBox instead of the ItemsControl. ListBox and ListView are both an extended ItemsControl. They both provide scrolling and a significantly improved performance.
First of all, you need to delete the Binding from code behind.
You can do this using Loaded event as follows:
<ItemsControl x:Name="icFiles" ItemsSource="{Binding Path=files}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Content="" IsChecked="{Binding IsChecked, Mode=TwoWay}" />
<TextBlock Loaded="ThisTextBlock_OnLoaded" x:Name="ThisTextBlock" Text="{Binding FileName}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
private void ThisTextBlock_OnLoaded(object sender, RoutedEventArgs e)
{
if (sender is TextBlock tb)
{
string? highlightText = "blue";
int highlightTextIndex = tb.Text.IndexOf(highlightText);
if (highlightTextIndex >= 0)
{
TextPointer textStartPointer = tb.ContentStart.DocumentStart.GetInsertionPosition(LogicalDirection.Forward);
TextRange? highlightTextRange = new TextRange(textStartPointer.GetPositionAtOffset(highlightTextIndex), textStartPointer.GetPositionAtOffset(highlightTextIndex + highlightText.Length));
highlightTextRange.ApplyPropertyValue(TextElement.BackgroundProperty, Brushes.Blue);
}
}
}

WPF Combobox is blank (data binding)

I followed a simple tutorial for comboboxes (http://www.wpf-tutorial.com/list-controls/combobox-control/).
Here is my XAML for the combobox :
<ComboBox Name="CoursesTeach" Grid.Row="7" Grid.Column="1" Width="150" Height="Auto" Margin="0,24">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Foreground="Black" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Code behind :
public AddTrainer()
{
InitializeComponent();
using (Model1Container context = new Model1Container())
{
foreach (var row in context.CourseSet)
{
if (row.Discipline != null)
{
CoursesTeach.ItemsSource = row.Discipline;
}
MetroCustomBox.ShowOK(row.Discipline); // i can see right values
}
}
}
But the results are just NOT in the combobox, although I can perfectly can print them.
Thanks a lot for your responses.
To add items in your Combobox by code behind you may use Items property.
With your previous code :
foreach (var row in context.CourseSet)
{
if (row.Discipline != null)
{
CoursesTeach.Items.Add(row.Discipline);
}
}
But a better way, is use ItemsSource property, with binding, or set by a List.
With your previous code :
CoursesTeach.ItemsSource = context.CourseSet.Where(row => row.Dicipline != null).Select(row => row.Dicipline).ToList();

Bind Image in DataTemplate to System.Drawing.Image

I am attempting to bind Image.Source in a DataTemplate to a System.Drawing.Image as discussed here: using XAML to bind to a System.Drawing.Image into a System.Windows.Image control
<UserControl.Resources>
<media:ImageConverter x:Key="imageConverter" />
<DataTemplate DataType="{x:Type data:GameTile}" >
<StackPanel Orientation="Vertical" Margin="5" Background="Transparent">
<Viewbox>
<TextBlock FontWeight="Bold" Text="{Binding PointValue}" TextAlignment="Center" FontSize="14" />
</Viewbox>
<Image Margin="0,5,0,0" Source="{Binding Path=Image.Image, Converter={StaticResource imageConverter}}" />
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid>
<loop:ListBox x:Name="listBox1"
ItemsSource="{Binding Path=GameModel.Game.GameTiles}"
ItemContainerStyle="{StaticResource GameTileContainerStyle}" Orientation="Vertical" />
</Grid>
The GameTile object has an Image (not a system.drawing.image) property that points to a Picture object which has an Image property of type System.Drawing.Image.
I am binding the ItemsSource on the ListBox to a GameTiles Collection on a Game object.
Objects
public class Game
{
public XPCollection<GameTile> GameTiles
{
get { return GetCollection<GameTile>("GameTiles"); }
}
}
public class GameTiles
{
Picture fImage;
public Picture Image
{
get { return fImage; }
set { SetPropertyValue<Picture>("Image", ref fImage, value); }
}
}
public class Picture
{
private FileData fFile;
public FileData File
{
get { return fFile; }
set
{
SetPropertyValue("File", ref fFile, value);
if (string.IsNullOrEmpty(fName))
{
fName = (value == null ? string.Empty : value.FileName);
}
fImage = null;
}
}
Image fImage;
public System.Drawing.Image Image
{
get
{
if (fImage == null)
{
try
{
MemoryStream stream = new MemoryStream();
fFile.SaveToStream(stream);
stream.Position = 0;
fImage = Image.FromStream(stream);
}
catch
{
//TODO: log exception
}
}
return fImage;
}
//set { SetPropertyValue<Image>("Image", ref fImage, value); }
}
}
The images are not showing up in the ListBoxItems, but any other property that I bind to in the DataTemplate will show up. It may be worth noting that I am using Devexpress Xpo as an ORM. Also the classes represented above do implement INotifyPropertyChanged.
Any thoughts on what I may be missing?
EDIT: Forgot to mention that I have implemented a value converter as mentioned in the post that I linked to above. However, if I put a breakpoint in the converter method, it is never called.
EDIT: Added the fFile property to the code above.
I can set an Image.Source to the GameTile.Image.Image property through c#(by converting it to BitmapImage), and have it work as expected, but I'm not sure how to accomplish that with a DataTemplate through c#. I would prefer to set the binding in XAML, but would settle for a c# workaround with a DataTemplate (or something else that would work). I am pretty confident that the issue is not with the GameTile.Image property pulling image from the database because if I manually set the source on an Image.Source in c#, the image is there. It simply isn't working in the DataTemplate.
Edit: Determined the issue to be related to properties that are not directly on the DataType that I am binding to for example with and GameTile has a (int)PointValue property, a (Picture object)Image property, and a (Prize object)Prize property.
If I bind to
<TextBlock Text="{Binding PointValue}" />
it works as expected.
But if I bind to
<TextBlock Text="{Binding Prize.Name}" />
it does not work.
And If I bind to
<Image Margin="0,5,0,0" Source="{Binding Image.BitmapImage}" />
it fails also. The following graphic shows the error that is being thrown by the binding.
BindingExpression path error: 'Name' property not found on 'object'
''XPCollection' (Hash=...)'. BindingExpression:Path=Prize.Name;
DataItem=GameTile' (HashCode=...); target element is
'TextBlock'(Name=''); target property is 'Text' (type 'String')
Thanks,
Eric
Found the solution.
Had to change this:
<TextBlock Text="{Binding Prize.Name}" />
to this:
<TextBlock Text="{Binding Prize!.Name}" />
The only difference is the exclamation point(!).
This also worked for the image property.
<Image Margin="0,5,0,0" Source="{Binding Path=Image!.Image, Converter={StaticResource imageConverter}}" />

How to bind color to textbox background wpf

Hi
I have a problem with seting a textbox background color using bindings.
I use this code
<TextBlock Width="Auto" Height="Auto"
Text="{Binding ConnectionType}"
Canvas.Left="{Binding LabelPosition.X}"
Canvas.Top="{Binding LabelPosition.Y}" Background="{Binding ParentCanvasColor}">
<TextBlock.RenderTransform>
<TranslateTransform X="5" Y="5"/>
</TextBlock.RenderTransform>
</TextBlock>
ParentCanvasColoris property which is in my class called connection. This property looks like that
public Color ParentCanvasColor
{
get
{
if (parentCanvas != null && parentCanvas is DesignerCanvasNetDiag)
{
return Colors.Red;
}
return Colors.Transparent;
}
}
Of course I added object of class Connection to datacontext of textBlock
bind SolidColorBrush instead of Color like following.
public SolidColorBrush ParentCanvasColor
{
get
{
if (parentCanvas != null && parentCanvas is DesignerCanvasNetDiag)
{
return new SolidColorBrush(Colors.Red);
}
return new SolidColorBrush(Colors.Transparent);
}
}

WPF: Getting TreeViewItem's constituent controls

how can I get the constituent controls making up the TreeViewItem in code if they are inside a hierarichicaldatatemplate?
<HierarchicalDataTemplate DataType="{x:Type local:Module}" ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<Image Width="16" Height="16" Margin="3,0" Source="Images\module.ico" />
<local:RenamingNode Name="RenamableNode" Text="{Binding Name}" VstaObject="{Binding BindsDirectlyToSource=True}" OnRename="OnRenameOccured" />
</StackPanel>
</HierarchicalDataTemplate>
So programatically when I get an event with a TreeViewItem as the source, I want to be able to get the local:RenamingNode, but I can't get the TreeViewItem's descendants.
Thanks,
Ilya
This worked for me. Doubtless there is a better way, as always, and you will doubtless add extra checks such as checking the Child(ren) count and/or getting/checking type/name of children in a loop etc. but the basic technique works, well it did in my app although I have a Grid instead of a StackPanel.
private object FindContentTemplatePart(TreeViewItem treeViewItem)
{
if (treeViewItem != null)
{
var header = (ContentPresenter)treeViewItem.Template.FindName("PART_Header", treeViewItem);
if (header != null)
{
StackPanel stackPanel = (StackPanel)VisualTreeHelper.GetChild(header,0);
return stackPanel.Children[2];
}
}
return null;
}
You can use FrameworkTemplate.FindName to find the header content presenter in the TreeView item control template, and then again to find the part you want in the data template.
private object FindContentTemplatePart(TreeViewItem treeViewItem)
{
if (treeViewItem != null)
{
var header = treeViewItem.Template.FindName("PART_Header", treeViewItem) as ContentPresenter;
if (header != null)
{
return header.ContentTemplate.FindName("RenamableNode", header);
}
}
return null;
}
You could also walk the visual tree manually with the methods on VisualTreeHelper.
I'm assuming that this will be the same in WPF as silverlight (this is the silverlight version)
(treeViewItem.HeaderTemplate.LoadContent() as StackPanel).FindName("RenamableNode")
None of the above Solutions works in Silverlight
but this seems to work.
<common:HierarchicalDataTemplate x:Key="myHierarchicalTemplate" ItemsSource="{Binding Children}" >
<StackPanel x:Name="spTreeItem" Height="23" Margin="0,0,0,0" HorizontalAlignment="Stretch" Orientation="Horizontal">
</StackPanel>
</common:HierarchicalDataTemplate>
Following the code
TreeViewItem item = TreeViewWorkarounds.ContainerFromItem(trtFolders, trtFolders.SelectedItem);
Grid ItemGrid = (Grid) VisualTreeHelper.GetChild(item, 0);
Button ItemGridButton = (Button)VisualTreeHelper.GetChild(ItemGrid, 2);
Grid ButtonGrid = (Grid)VisualTreeHelper.GetChild(ItemGridButton, 0);
ContentPresenter CP = (ContentPresenter)VisualTreeHelper.GetChild(ButtonGrid, 1);
ContentPresenter CPchlild = (ContentPresenter)VisualTreeHelper.GetChild(CP, 0);
StackPanel sp = (StackPanel)VisualTreeHelper.GetChild(CPchlild, 0);

Resources