Develop Reference

C# UWP Get Items in ListView's ItemTemplate

I am trying to access textblocks and textboxes in a listview, but cannot get them in C# code because they are inside an ItemTemplate and DataTemplate. Here is a sample of the XAML code:
<ListView x:Name="VehicleList" HorizontalAlignment="Center" Height="120" Margin="0" VerticalAlignment="Center" Width="1119" Background="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" SelectionChanged="VehicleList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="VehicleGrid" Height="52" Width="1117" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="318*"/>
<ColumnDefinition Width="425*"/>
<ColumnDefinition Width="366*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Year" Grid.Column="0" TextWrapping="Wrap" Text="{Binding Year}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667"/>
<TextBlock x:Name="Make" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Make}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" />
<TextBlock x:Name="Model" Grid.Column="2" TextWrapping="Wrap" Text="{Binding Model}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667"/>
<TextBox x:Name="AddYear" Grid.Column="0" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddMake" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddModel" Grid.Column="2" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Is there anyway to get the items inside the DataTemplate?

Your problem is generic to all XAML flavors, same in WPF and Silverlight. The problem is your DataTemplate. Keep in mind that XAML will inject the contents of your DataTemplate once for each item in your list. That means your names can only exist within the scope of an instance of your DataTemplate.
If you have do code behind for your template, you might do better by creating a UserControl. See below for an example:
<!-- most boiler plate code skipped -->
<UserControl x:Class="MyProject.VehicleListItem">
<Grid x:Name="VehicleGrid" Height="52" Width="1117" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="318*"/>
<ColumnDefinition Width="425*"/>
<ColumnDefinition Width="366*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Year" Grid.Column="0" TextWrapping="Wrap" Text="{Binding Year}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667"/>
<TextBlock x:Name="Make" Grid.Column="1" TextWrapping="Wrap" Text="{Binding Make}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" />
<TextBlock x:Name="Model" Grid.Column="2" TextWrapping="Wrap" Text="{Binding Model}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,0,0" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667"/>
<TextBox x:Name="AddYear" Grid.Column="0" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="321" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddMake" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="425" FontSize="26.667" Visibility="Collapsed"/>
<TextBox x:Name="AddModel" Grid.Column="2" TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" Height="52" Grid.ColumnSpan="1" TextAlignment="Center" Width="366" FontSize="26.667" Visibility="Collapsed"/>
</Grid>
</UserControl>
That let's you do everything you need to do from a UserControl that can be instantiated, has it's own code behind, etc. You can get that working exactly how you want, and then reference it when you need it in your list like this:
<ListView x:Name="VehicleList" HorizontalAlignment="Center" Height="120" Margin="0" VerticalAlignment="Center" Width="1119" Background="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" SelectionChanged="VehicleList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<myProject:VehicleListItem/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The ListView will assign a vehicle item to the DataContext of your user control and everything will work just like you designed it to.
There is a way to get at the visual tree in code behind but it is very convoluted. Essentially you need to use the ListView.ItemContainerGenerator and call ContainerFromItem(dataItem) (ref) and then walk down the visual tree you get from that. It's not only a serious pain to do, there's no guarantee all of the API will be accessible from WPF to UWP or SilverLight. The cleanest solution is to break up the code into independent pieces.
Another solution, which probably is even more clean that what I proposed is to take advantage of your bound objects. ListView.SelectedItem returns your object that is bound to the DataTemplate. Just get the values from that object. If you have a ViewModel that includes properties for AddYear, AddMake, and AddModel then it makes a lot of the work easier to do since you aren't dealing with XAML at all.

If it's okay for you to do this on a button-click; you could use the CommandParameter or traverse the VisualTree like these two links suggest:
How to get text from TextBox inside ListViewItem's DataTemplate
How to get the value out of a textbox in XAML?

UserControl
It sounds like a UserControl is what you are looking for.
Project → Add UserControl
It should be easy since you already have the XAML design. The code behind will look something like this:
public class VehicleView : UserControl
{
// Year
public static readonly DependencyProperty YearProperty =
DependencyProperty.Register("Year", typeof(int), typeof(VehicleView),
new PropertyMetadata());
public int Year
{
get { return (int)GetValue(YearProperty); }
set { SetValue(YearProperty, value); }
}
// Make
public static readonly DependencyProperty MakeProperty =
DependencyProperty.Register("Make", typeof(string), typeof(VehicleView),
new PropertyMetadata("None"));
public string Make
{
get { return (string)GetValue(MakeProperty); }
set { SetValue(MakeProperty, value); }
}
// Model
public static readonly DependencyProperty ModelProperty =
DependencyProperty.Register("Model", typeof(string), typeof(VehicleView),
new PropertyMetadata("None"));
public string Model
{
get { return (string)GetValue(ModelProperty); }
set { SetValue(ModelProperty, value); }
}
public VehicleView()
{
InitializeComponent();
}
}
Binding words the same way. Just name the UserControl with x:Name. Something like:
<UserControl x:Name="vehicleview"
x:Class="MyProjectClass"
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"
mc:Ignorable="d">
<Grid>
<!-- Here's where your ListView goes. -->
<TextBox Text="{Binding ElementName=vehicleview, Path=Model}"/>
<Grid>
</UserControl>

As i can see you have used bindings.
On VehicleList_SelectionChanged you can do the following
List<YouClass-Model> selectedItems = VehicleList.SelectedItems.Cast<YouClass-Model>().ToList();
or if you use ItemClicked EventHandler
YouClass-Model itemClicked = (YouClass-Model)e.ClickedItem)
That way you can load the binded data. ex itemClicked.Model
Also make sure that you binded your data correctly
Data binding overview
INotifyPropertyChanged.PropertyChanged

To get the UI control from the index or data, use listView.ContainerFromIndex or listView.ContainerFromItem. This is the accepted way in UWP.

try this code:
private void myListView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
ListItemData data = args.Item as ListItemData;
ListViewItem a = args.ItemContainer as ListViewItem;
var b = a.ContentTemplateRoot as Grid;
var txtBlock =b.FindName("txtTitle") as TextBlock;
txtBlock.Text = data.Title;
TextRange textRange = new TextRange()
{
StartIndex = 1,
Length = 3
};
TextHighlighter highlighter = new TextHighlighter()
{
Background = new SolidColorBrush(Colors.Yellow),
Ranges = { textRange }
};
txtBlock.TextHighlighters.Add(highlighter);
}

Command binding is not working in MVVM light toolkit [5.2.0] for windows store app

First of all I'm using MVVM light toolkit for building my Windows Store app. So the datacontext will be set in ViewModelLocator.
I'm trying to bind command for a button from Hub control's header.
Here's my code from XAML which has button:
<DataTemplate x:Key="DataTemplate10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="700"/>
<ColumnDefinition Width="800"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="user trading terminal"
Width="Auto"
Height="70"
Grid.Column="0"/>
<Button Content="sign in" Grid.Column="1"
Width="Auto"
HorizontalAlignment="Right" Command="{Binding SignIn}"/>
</Grid>
</DataTemplate>
Here's my Hub Control's XAML code from where I'm calling above datatemplate:
<Hub Header="user trading terminal" HeaderTemplate="{StaticResource DataTemplate10}">
<Hub.Background>
<ImageBrush Stretch="Fill" ImageSource="ms-appx:///Assets/HubImages/BackGround.jpg"/>
</Hub.Background>
<HubSection Header="indices" Width="500" ContentTemplate="{StaticResource DataTemplate1}" x:Name="indicesSection"/>
<HubSection Header="market movers" Width="530" ContentTemplate="{StaticResource DataTemplate4}"/>
<HubSection Header="commodities" Width="500" ContentTemplate="{StaticResource DataTemplate6}"/>
<HubSection Header="currency" Width="500" ContentTemplate="{StaticResource DataTemplate8}"/>
</Hub>
Following is my ViewModel's code:
public class ApplicationHubViewModel : ViewModelBase
{
private RelayCommand<object> _signIn;
/// <summary>
/// Gets the IndicesTap.
/// </summary>
public RelayCommand<object> SignIn
{
get
{
return _signIn
?? (_signIn = new RelayCommand<object>((t) => SignInProcess(t)));
}
}
private void SignInProcess(Object t)
{
IsPopUpOpen = true;
IsHubControlEnabled = false;
}
}
Can anyone tell me why I'm not able to call the button's command?
Is it because I'm using MVVM light toolkit 5.2.0. Because normally in simple WPF application I'm able to call command without any problems.

This should get you going.
Command="{Binding SignIn,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Hub}}}

In Datatemplete button should have following code for command binding:
<DataTemplate x:Key="DataTemplate10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="700"/>
<ColumnDefinition Width="800"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="user trading terminal"
Width="Auto"
Height="70"
Grid.Column="0"/>
<Button Content="sign in" Grid.Column="1"
Width="Auto"
HorizontalAlignment="Right" Command="{Binding Tag.SignIn, ElementName=mainContainer}"/>
</Grid>
</DataTemplate>
The element name should be top level element's name. In my case I have ContentControl as top level element above hub.
<Hub Header="user trading terminal" HeaderTemplate="{StaticResource DataTemplate10}">
<Hub.Background>
<ImageBrush Stretch="Fill" ImageSource="ms-appx:///Assets/HubImages/BackGround.jpg"/>
</Hub.Background>
<HubSection Header="indices" Width="500" ContentTemplate="{StaticResource DataTemplate1}" x:Name="indicesSection"/>
<HubSection Header="market movers" Width="530" ContentTemplate="{StaticResource DataTemplate4}"/>
<HubSection Header="commodities" Width="500" ContentTemplate="{StaticResource DataTemplate6}"/>
<HubSection Header="currency" Width="500" ContentTemplate="{StaticResource DataTemplate8}"/>
</Hub>
</ContentControl>
Basically Tag property plays important role while binding.

WPF: Bind to class properties

I am using MVVM, I am trying to bind three TextBox's to a Client class properties as follow:
<TextBox Text="{Binding NewClient.Name, Mode=OneWayToSource}" Grid.Column="1" HorizontalAlignment="Left" Margin="5"/>
<TextBox Text="{Binding NewClient.NameInLatin, Mode=OneWayToSource}" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Margin="5"/>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" >
<TextBox Text="{Binding NewClient.IDNumber, Mode=OneWayToSource}" Margin="5" />
<Button Content="{Binding ScanLabel,Source={StaticResource LocalStrings}}" Margin="4"/>
</StackPanel>
In my View Model I defined the NewClient property the classic way:
private Client newClient;
public Client NewClient
{
get { return newClient; }
set
{
newClient = value;
NotifyPropertyChanged("NewClient");
}
}
When place a breakpoint inside a boolean property just to test the value of newClient, and I find it null.
So why is it the newClient property loses it's value?
Here is the entire xaml part:
<Border Background="AntiqueWhite"
DataContext="{StaticResource ServicesViewModel}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding NameLabel, Source={StaticResource LocalStrings}}"
Style="{StaticResource SubTitles}" />
<TextBlock Text="{Binding NameInLatinLabel, Source={StaticResource LocalStrings}}"
Grid.Row="1"
Style="{StaticResource SubTitles}" />
<TextBlock Text="{Binding IDNumberLabel, Source={StaticResource LocalStrings}}"
Grid.Row="2"
Style="{StaticResource SubTitles}" />
<TextBox Text="{Binding NewClient.Name, Mode=OneWayToSource}"
Grid.Column="1"
HorizontalAlignment="Left" />
<TextBox Text="{Binding NewClient.NameInLatin, Mode=OneWayToSource}"
Grid.Row="1"
Grid.Column="1"
HorizontalAlignment="Left" />
<StackPanel Orientation="Horizontal"
Grid.Row="2"
Grid.Column="1">
<TextBox Text="{Binding NewClient.IDNumber, Mode=OneWayToSource}" />
<Button Content="{Binding ScanLabel,Source={StaticResource LocalStrings}}" />
</StackPanel>
</Grid>
</Border>
I tired to bind to a property I created called Name, and the binding did work.

By default TextBox.Text updates when a control loses focus, so if you need to update your property every time text changes you should use binding like this:
{Binding NewClient.Name, UpdateSourceTrigger=PropertyChanged}
How to: Control When the TextBox Text Updates the Source
If it still doesn't work, then probably NewClient is not initalized. In Debug Output window should show you issues with bindings.

You don't need to use the name of the item held in the datacontext. Simply report its property only:
Before:
Binding NewClient.Name, Mode=OneWayToSource
after
Binding Name, Mode=OneWayToSource
Also OneWayToSource is primarily used for read-only data. Remove that to
Binding Name

I was experiencing similar problem. In ViewModel I did binding to a Class property.
class SampleClass
{
public string Name {get; set;}
public int Age {get; set;}
}
class ViewModelClass
{
public SampleClass Sample {get; set;}
}
And I found thhat for binding to work, should be used Properties in SampleClass, not Fields. It helped me.

No success binding an Image

I am trying to bind an image on the main window with a string (stored in another class) which represents the file path of the image I want to display.
But nothing shows up.
Here is my main window code xaml code:
<HierarchicalDataTemplate x:Key="categoryTemplate"
ItemsSource="{Binding Path=Items}"
ItemTemplate="{StaticResource animalTemplate}">
<Grid MouseEnter="DockPanel_MouseEnter" MouseLeave="DockPanel_MouseLeave">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="16" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center" Source="{Binding Path=IconFilePath}" VerticalAlignment="Center" Width="16" Height="16" Grid.Column="0" />
<TextBlock Text="{Binding Path=Name}" Margin="5,0,0,0" FontWeight="Bold" FlowDirection="{Binding Path=FlowDirection}" FontSize="14" HorizontalAlignment="Stretch" Grid.Column="1" />
<Border CornerRadius="2" Background="Lavender" Grid.Column="2" Margin="0,0,5,0">
<TextBlock Text="30" Foreground="DodgerBlue" HorizontalAlignment="Center" FontWeight="Bold" FontSize="13" />
</Border>
<aea:MenuButton Margin="0,0,2,0" Opacity="0" HorizontalAlignment="Right" Grid.Column="3" SnapsToDevicePixels="False" Width="16" Height="16" DisplayStyle="Text" IsEnabled="True" IsDropDownOpen="False">
<aea:SplitButtonItem IsSelected="True" Visibility="Collapsed">
<Image HorizontalAlignment="Center" Source="Assets\FeedMenu.png" VerticalAlignment="Center"/>
</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_MarkAllAsRead">Mark all as Read</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_AddAllToFavorites">Add all to Favorites</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_ReadAllLater">Read all Later</aea:SplitButtonItem>
<aea:SplitButtonItem Tag="{Binding Path=me}" Selected="Subscription_OpenAllBrowser">Open all in browser</aea:SplitButtonItem>
</aea:MenuButton>
</Grid>
<!--<TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>-->
</HierarchicalDataTemplate>
Here is my other class:
public string IconFilePath { get; private set; }
public Subscription()
{
this.IconFilePath = #"C:\Users\Din\Din\Programming\Webs\Ended Projects\CodeCaged\Products\Read 360\Read 360\Read 360\bin\Release\feeds\1.ico";
}

You are binding relative to the DataContext so you need to make sure its an instance of that class. Also check for binding errors, not more to be said with this little context.

It is hard without a full code listing of how this control is setup (e.g. where and how is the DataContext set?, and how is the list of 'Items' populated?)
But on the surface it appears you're expecting to get both 'Name' and 'IconFilePath' from an Items element, so to confirm the Subscription Class defines both IconFilePath and Name?
A tool like Snoop can automatically display binding errors in a running applications visual tree; and I would expect it to list such in this case.
Also to reduce possible headaches (and this may well be the issue) it may be worth mentioning INotifyPropertyChanged for your data class. Property changes on your data class will not automatically progate otherwise.

How to change datatemplate through code

I have ListBox and DataTemplate
I need Set GroupBox Heigth = 300
How to do it?
<DataTemplate x:Key="data_template">
<GroupBox Header="Категория" Width="300" HorizontalAlignment="Stretch" x:Name="GroupBox">
<DockPanel Tag="{Binding id}">
<Button Click="Button_Click" DockPanel.Dock="Top" >
<Button.Content>
<DockPanel>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" DockPanel.Dock="Top" Padding="5" HorizontalAlignment="Center" Foreground="#FFB51414" />
<l:ScrollViewerEx VerticalScrollBarVisibility="Auto" >
<TextBlock Text="{Binding description}" DockPanel.Dock="Top" TextWrapping="Wrap" Padding="5" IsHitTestVisible="False" />
</l:ScrollViewerEx>
</DockPanel>
</Button.Content>
</Button>
</DockPanel>
</GroupBox>
</DataTemplate>

In case, someone tried to resolve my previous question, I did it like the following:
DataTemplate mycolumnDataTemplate = null;
var dataTemplateStream = new SomeClass().GetType().Assembly.GetManifestResourceStream("Some.Namespace.SomeReosurceName.xaml");
string dataTemplateString = new System.IO.StreamReader(dataTemplateStream).ReadToEnd();
dataTemplateString = dataTemplateString.Replace("[0]", browserColumn.ColumnName);
mycolumnDataTemplate = XamlReader.Load(dataTemplateString) as DataTemplate;

What are you trying to achieve? Do you want the GroupBox Height to be changed at the runtime of your application, when some event occurred or some data has changed? If so, then what you are probably looking for is a data trigger or event trigger, which you simply need to add to your DataTemplate.