We Keep Coding

Can a user control perform binding when part of a ListView in WinUI?

I'm trying to use a UserControl-derived control (UpdateBlockControl) inside the DataTemplate of a ListView, like this:
<ListView x:Name="AppsListView">
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:AppBase">
<StackPanel Orientation="Horizontal">
<local:UpdateBlockControl ImageSource="{x:Bind ImageSource}" AppName="{x:Bind Name}"/>
<TextBlock Text="{x:Bind Name}" Foreground="Orange" Margin="8,0,0,0" />
<TextBlock Text="{x:Bind ImageSource}" Margin="8,0,0,0" Foreground="LimeGreen"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
UpdateBlockControl is derived from UserControl and I'm trying to bind its properties (ImageSource and AppName) to the model's (AppBase) properties.
You can see me trying to set up these bindings in the first item in the StackPanel. Just to see if the binding works at all, I also bind a couple of TextBlocks to these properties.
The XAML for UserBlockControl is essentially this:
<StackPanel Orientation="Vertical">
<TextBlock Text=":-)"/>
<TextBlock Text="{x:Bind AppName}"/>
<TextBlock Text="{x:Bind ImageSource}"/>
</StackPanel>
When I run the application I see the following:
So the UserControl properties aren't working correctly it would seem: I get the :-) for the first TextBlock but the second and third TextBlocks are empty. Their equivalents in the ListView do work however (see image, above).
Should I be able to use a user control insisde a DataTemplate like this? If so, why aren't the bindings working?

x:Bind is Mode=OneTime by default. So, once a DependencyProperty is initialized inside the UserControl, it won't be updated anymore.
You need to add Mode=OneWay to x:Bind in UpdateBlockControl.
<StackPanel Orientation="Vertical">
<TextBlock Text=":-)" />
<TextBlock Text="{x:Bind AppName, Mode=OneWay}" />
<TextBlock Text="{x:Bind ImageSource, Mode=OneWay}" />
</StackPanel>

Nested Dynamic Content Controls with MVVM

I am interested in creating a system of nested content controls to visually represent a user created network of nodes in an automation system.
Simply, I have nodes 'x' and they each contain modules 'y' which host channels 'z'.
So far I have set up in the ViewModel a system for instantiating all of this.
I have a List<x> where x is a model that contains a List<y> (and attributes: name, ID),
where y is a model that contains List<z>(and attributes: name, index) where z is a model for a channel (attributes: name, state, command).
I would now like to display these in my View.
The way I would like to do this is as follows, for each model x in List<x> there should be a Headered Content Control (or some other control) whose item-source is the List<y> in this model x. The Content Control should also display the 'name' attribute of x.
The datatemplate for each y under this Content Control should be a similar Content Control where the item-source is the List<z> in this model y. The Content Control should also display the 'name' attribute of y.
Finally, each model z under this content control should be displayed as a CheckBox that binds it's "ischecked" state to the 'state' attribute of the model, it's content to the 'name' attribute, and it's command to the 'command' attribute.
My question is; is there a way to do this in MVVM? And if so, how would I go about setting it up?

As usual, there are several ways to accomplish this task. It strongly depends on what kind of visual result you want to achieve.
You can display your data as a tree:
<TreeView ItemsSource="{Binding Nodes}">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:Node}"
ItemsSource="{Binding Modules}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Module}"
ItemsSource="{Binding Channels}">
<TextBlock Text="{Binding Name}" />
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type local:Channel}">
<CheckBox Content="{Binding Name}"
IsChecked="{Binding State}"
Command="{Binding Command}" />
</DataTemplate>
</TreeView.Resources>
</TreeView>
In this example both appearance and relation to nested items for your classes are defined by HierarchicalDataTemplates. TreeView control is "smart" enough to know what to do with those.
More general solution would be something along these lines:
<ItemsControl ItemsSource="{Binding Nodes}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<HeaderedContentControl Header="{Binding Name}">
<ItemsControl ItemsSource="{Binding Modules}"
Margin="10,0,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<HeaderedContentControl Header="{Binding Name}">
<ItemsControl ItemsSource="{Binding Channels}"
Margin="10,0,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding State}"
Content="{Binding Name}"
Command="{Binding Command}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</HeaderedContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</HeaderedContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Here a template for each class is defined explicitly by ItemTemplate property on corresponding ItemsControl. I used Margin property for nested items to introduce some indentation.
NOTE
I've replaced x, y and z class names with Node, Module and Channel respectively for the sake of readability. Also, I'm using corresponding collection names - Nodes, Modules and Channels - which I believe should be self-explanatory.

How to bind properties of one ObservableCollection of ListView to properties of SelectedItem of another ListView?

So I have a few ListViews. The first is binded to ObservaleCollection<ComPort>. All properties of ComPort may take some predefined values. Other ListViews are responsible for that properties: they show all that possible (predefined) values and SelectedItem should be the current value of that property of ComPort from the first ObservaleCollection.
I can't attach images so here is an external picture, it would make the situation clean: http://i.stack.imgur.com/ZBRRx.png
<Window.Resources>
<ResourceDictionary x:Name="rd">
<l:ComPorts x:Key="vComPorts"/>
<l:SystemPorts x:Key="vSystemPorts"/>
<l:BaudRates x:Key="vBaudRate"/>
<l:Parities x:Key="vParities"/>
<l:DataBits x:Key="vDataBits"/>
<l:StopBits x:Key="vStopBits"/>
<l:Timeouts x:Key="vTimeouts"/>
<l:ComPort x:Key="vSelectedPort"/>
</ResourceDictionary>
</Window.Resources>
...
<ListView
Name="PortsList"
Grid.Row="1"
Grid.Column="0"
Margin="5"
VerticalAlignment="Stretch"
ItemsSource="{StaticResource vComPorts}"
DataContext="{StaticResource vComPorts}"
SelectedValuePath="PortName"
SelectedValue="{Binding ElementName=SystemPortsList, Path=SelectedItem.Value}"
SelectionChanged="PortsList_SelectionChanged"
MouseDoubleClick="PortsList_MouseDoubleClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox />
<TextBlock Margin="5,0,0,0" Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView
x:Name="SystemPortsList"
Margin="5"
VerticalAlignment="Stretch"
DataContext="{Binding Source={StaticResource vSelectedPort}}"
ItemsSource="{Binding Source={StaticResource vSystemPortsView}}"
SelectedItem="{Binding Source={StaticResource vSelectedPort}, Path=PortName}"
MouseEnter="SystemPortsList_Refresh"
MouseLeave="SystemPortsList_Refresh"
Grid.Row="1"
Grid.Column="1" SelectionChanged="SystemPortsList_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Name="tb" Margin="5,0,0,0" Text="{Binding Path=Name}" />
</StackPanel>
</ListView.ItemTemplate>
</ListView>
I've tried to make an instance of class ComPort for saving current value of selected item from the first ListView, but anyway I can't cope with it without help. How this task should be solved?

1) Instead of handling SelectionChanged on the PortsList ListView, bind your checkbox to the ListViewItemsPanel like so:
<CheckBox IsChecked={Binding IsSelected, RelativeSource=Parent/>
2) Add an x:Name to your first ListBox, say x:Name="ComPortLB";
3) Remove DataContext on SystemPortsList;
4) Fix SelectedItem on SystemPortsList like so:
SelectedValue="{Binding ElementName=ComPortLB, Path=SelectedValue.PortName}"
I haven't tested any of this code and I haven't done this kind of stuff for a while, so I apologize for errors, but it should get you closer. I've also had to make some assumptions about your classes since you don't provide enough information.

Binding data to ListView doesn't work (Metro UI)

When I put this code into my XAML file:
<TextBlock Text="{Binding Name}" FontSize="16" Margin="15,0,0,0" />
It shows me Name value but when I try show it via ListView:
<ListView x:Name="ItemListView"
ItemsSource="{Binding Items}"
Margin="60,0,0,10">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"
FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" />
<TextBlock Text="{Binding Artist}"
FontSize="16" Margin="15,0,0,0"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
It doesn't show up :( What could be wrong?

If the page inherits from LayoutAwarePage, like it will by default when created from a template, the DataContext will be set to a property named DefaultViewModel. Properties exposed in your codebehind will not be bound to.

You are looking at two different objects in the sample. In the textbox you are looking at the Name of the object in the datacontext, in the listview you are looking at the Items[x].Name for each item you bind to. If you need to reference the Name from the datacontext rather than the Items collection you will need to bind the source to an Element not inherit it.

How to access a value in a TextBlock?

I have a window with the following elements, and I'm trying to access the value contained in <TextBlock Name="armingValue" but in my .xaml.cs file it doesn't seem to be recognised.
What do I need to do to access the value?
<Window.Resources>
<DataTemplate DataType="{x:Type ArmingVM:ArmingItem}">
<CheckBox Margin="10,5" IsChecked="{Binding IsSet}" Content="{Binding Name}"/>
</DataTemplate>
<DataTemplate DataType="{x:Type ArmingVM:ArmingBindingData}">
<DockPanel>
<ItemsControl ItemsSource="{Binding ArmingItems}" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<TextBlock Text="Enum Value: " HorizontalAlignment="Right"/>
<TextBlock Name="armingValue" Text="{Binding Value}" HorizontalAlignment="Right"/>
</DockPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="193*" />
<ColumnDefinition Width="551*" />
</Grid.ColumnDefinitions>
<Button Content="Get Panel Options" Name="btnGetOptionsConfigruation" Margin="12,12,23,396" Click="btnGetOptionsConfigruation_Click"></Button>
<StackPanel Grid.Column="1" Height="325" HorizontalAlignment="Left" Margin="68,43,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="438">
<ItemsControl Name="armingItemsControl" ItemsSource="{Binding}"/>
</StackPanel>
</Grid>

The backing variables generated by visual studio within the .xaml.cs file are only generated for certain circumstances. Any 'named' element within the body of a user control will have a generated backing variable. However, named elements within templates will not be generated. This is because Visual Studio has no way of knowing how your template will be used. For example, your template could be used by an ItemsControl to generate multiple template instances. What should be generated within .xaml.cs in that case?
You have two options:
Use binding, so that the state of your TextBlock.Text property is bound to a view model, so that you do not have to access the TextBlock element directly.
'walk' the visual tree to locate your TextBlock at runtime.
For (2), I would suggest using Linq-to-VisualTree, where you can find your TextBlock as follows:
TextBlock block = layoutRoot.Descendants<TextBlock>()
.Cast<TextBlock>().Where(tb => tb.Name="armingValue")
.Single();

You do not need to access TextBox value but its binded value.
So considering that you have in XAML
<TextBlock Name="armingValue" Text="{Binding Value}" HorizontalAlignment="Right"/>
You need to read a Value
Try always to avoid access UI elements directly in WPF, cause sometimes (not so rare cases) it becomes really tricky to find them if not imossible (I mean not guranteed way). Access a Data that stands behind them.

Maybe I did not get the point but why don't you create a binding to textbox and mark it as two way?
<TextBlock Text="Enum Value: " HorizontalAlignment="Right" Text="{Binding Value, Mode=TwoWay}"/>