We Keep Coding

C# WinUI3 Desktop: How can I reference or control a button in a ListView's selected item DataTemplate?

I have a ListView:
<ListView x:Name="All_Staging_ListView"
SelectionMode="Single"
SelectionChanged="All_Staging_ListView_SelectionChanged"
ItemTemplate="{StaticResource All_Staging_ListView_Template}"
BorderThickness="3"
BorderBrush="#005986"
HorizontalAlignment="Stretch"/>
I have a DataTemplate for the ListView:
<Page.Resources>
<DataTemplate x:Key="All_Staging_ListView_Template" x:DataType="local1:All_Staging_Data_Collection_ViewEdit">
<Border BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{x:Bind Metric_ID}" x:Phase="1" FontWeight="ExtraBold" Margin="0,0,5,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{x:Bind Period}" Margin="0,0,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="3" Text="{x:Bind ID}" Margin="25,0,0,0"/>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="4" x:Name="ButtonListViewEdit" Content="Edit this metric" Margin="20,0,0,0" Visibility="Collapsed" Click="ButtonListViewEdit_Click"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Name:" FontWeight="Bold" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{x:Bind Metric_Name}" x:Phase="1" Margin="0,0,20,0"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="Product:" FontWeight="Bold"/>
<TextBlock Grid.Row="1" Grid.Column="3" Text="{x:Bind Product}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Definition:" FontWeight="Bold"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{x:Bind Metric_Definition}" x:Phase="1" Margin="0,0,20,0"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="Company:" FontWeight="Bold" />
<TextBlock Grid.Row="2" Grid.Column="3" Text="{x:Bind Company}"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Goal:" FontWeight="Bold"/>
<TextBlock Grid.Row="3" Grid.Column="1" Text="{x:Bind Goal_Description}" x:Phase="1" Margin="0,0,20,0"/>
<TextBlock Grid.Row="3" Grid.Column="2" Text="System:" FontWeight="Bold"/>
<TextBlock Grid.Row="3" Grid.Column="3" Text="{x:Bind System}"/>
</Grid>
</Border>
</DataTemplate>
</Page.Resources>
When an item in the ListView is 'selected' I would like to make the button 'ButtonListViewEdit' visible!!!!! Edit: (I would like to make the button in the selected item visible only, not in the other unselected items in the ListView).
I don't know the syntax to reference the button within the datatemplate in the 'SelectionChanged' event handler:
private void All_Staging_ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
All_Staging_Data_Collection_ViewEdit listitem = new All_Staging_Data_Collection_ViewEdit();
listitem = (All_Staging_Data_Collection_ViewEdit)All_Staging_ListView.SelectedItem;
Debug.WriteLine($"ListView > SelectionChanged > Metric ID: {listitem.Metric_ID}");
}
I am able to access the values of the bound textblocks, but not the button (to make it visible).
Thank you members of stackoverflow for you help in advance.

Bind the Visibility property of the Button to a property of your All_Staging_Data_Collection_ViewEdit class or get a reference to the Button using the VisualTreeHelper class in your event handler:
private void All_Staging_ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
foreach (object selectedItem in e.AddedItems)
DisplayOrHideButton(selectedItem, true);
foreach (object selectedItem in e.RemovedItems)
DisplayOrHideButton(selectedItem, false);
}
private void DisplayOrHideButton(object item, bool display)
{
ListViewItem container = All_Staging_ListView.ContainerFromItem(item) as ListViewItem;
if (container != null)
{
Button button = FindVisualChild<Button>(container);
if (button != null)
button.Visibility = display ? Visibility.Visible : Visibility.Collapsed;
}
}
private static T FindVisualChild<T>(DependencyObject obj) where T : DependencyObject
{
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
{
DependencyObject child = VisualTreeHelper.GetChild(obj, i);
if (child != null && child is T t)
return t;
else
{
T childOfChild = FindVisualChild<T>(child);
if (childOfChild != null)
return childOfChild;
}
}
return null;
}

UWP C# ListView return the Id value of the clicked row

I am fairly new to coding and I am building a database UI.
What I need to do is click on a row in a listview and get the return of the Id.
Below is the code I have but it gets an 'Exception User-Unhandled System.ArgumentNullException: value cannot be null'.
Any help will be predicated.
UWP Xaml <ListView x:Name="ListItems" IsItemClickEnabled="True" ItemClick="ListItems_ItemClick" Tag="{Binding Id}"
>
private void ListItems_ItemClick(object sender, ItemClickEventArgs e)
{
var id = (sender as ListView).Tag as string;
{
testbox.Text = id;
}
Full List View
<ListView x:Name="ListItems" IsItemClickEnabled="True" ItemClick="ListItems_ItemClick" Tag="{Binding Id}"
>
<ListView.ItemTemplate >
<DataTemplate >
<Border
BorderThickness="0,0,0,0">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="130" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Padding" Value="8,0,0,0" />
</Style>
</Grid.Resources>
<TextBlock
Grid.Column="0"
HorizontalAlignment="Stretch"
Text="{Binding LegalName, Mode=OneWay}" />
<TextBlock
Grid.Column="1"
HorizontalAlignment="Stretch"
Text="{Binding PhoneNumber, Mode=OneWay}" />
<TextBlock
Grid.Column="2"
HorizontalAlignment="Stretch"
Text="{Binding EmailAddress, Mode=OneWay}" />
<TextBlock
Grid.Column="3"
HorizontalAlignment="Stretch"
Text="{Binding HomeAddress, Mode=OneWay}" />
<TextBlock
Grid.Column="4"
HorizontalAlignment="Stretch"
Text="{Binding PostalAddress, Mode=OneWay}" />
<TextBlock
Grid.Column="5"
HorizontalAlignment="Stretch"
Text="{Binding Id, Mode=OneWay}" />
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Here's a very easy approach. Bind the TextChanged event of all the texboxes to a TextChanged event :
XAML
<TextBlock Grid.Column="0" TextChanged="textbox_TextChanged".../>
C#
private string selectedText;
private void textbox_TextChanged(object sender, EventArgs e)
{
selectedtext = (sender as TextBlock).Text
}
private void ListItems_ItemClick(object sender, ItemClickEventArgs e)
{
///use selectedtext string as you want
}

do it Like that
1 - do not bind id to list-view Tag because it is Object.
2 - get your id like that
private void ListItems_ItemClick(object sender, ItemClickEventArgs e)
{
if ((e != null) && (e.Item != null))
{
var selected = (lsv.SelectedItem as yourClassType);
var yorItemID=selected .id;
}
}

Image Gallery with Flipview

I want to create a gallery image on the first page contains a thumbnail for that category and when thumbnail is selected, it will open the image and description of the selected image in flipview (can be swipe to the right and to the left when thumbnail is selected for the image before and after). I have difficulties when applying it into flipview.
Code:
MainPage XAML
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="3"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick" Background="#FF6996D1" >
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="240" Height="180">
<Border>
<Image Source="{Binding ImagePath}" Stretch="Uniform" AutomationProperties.Name="{Binding Title}"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
MainPage:
public MainPage()
{
this.InitializeComponent();
Gallery();
}
private async void Gallery()
{
var sampleDataGroups = await DataItemSource.GetGroupsAsync();
this.DefaultViewModel["Groups"] = sampleDataGroups;
}
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}
ItemDetailPage XAML:
<Grid Grid.Row="1" x:Name="contentRegion" Background="#FF6996D1">
<Image Source="{Binding ImagePath}" HorizontalAlignment="Left" Height="559" Margin="84,20,0,49" VerticalAlignment="Center" Width="732"/>
<ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="852,60,50,91" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
<TextBlock Text="{Binding Description}" TextWrapping="Wrap" Height="2210" Width="425" FontSize="27" TextAlignment="Justify" />
</ScrollViewer>
</Grid>
ItemDetailPage Code:
public ItemDetailPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
}
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var item = await DataItemSource.GetItemAsync((String)e.NavigationParameter);
this.DefaultViewModel["Item"] = item;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
navigationHelper.OnNavigatedTo(e);
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
navigationHelper.OnNavigatedFrom(e);
}
How do I apply flipview on ItemDetailPage?
Note:
For more code detail you can view the sample

To apply flipview on ItemDetailPage, we can add FlipView under "contentRegion" and set the Image and ScrollViewer as FlipView's ItemTemplate like following:
<Grid x:Name="contentRegion" Grid.Row="1" Background="#FF6996D1">
<FlipView ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Width="732"
Height="559"
Margin="84,20,0,49"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="{Binding ImagePath}" />
<ScrollViewer x:Name="myScroll"
Margin="852,60,50,91"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto">
<TextBlock Width="425"
Height="2210"
FontSize="27"
Text="{Binding Description}"
TextAlignment="Justify"
TextWrapping="Wrap" />
</ScrollViewer>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
And in code-behind, set the data source like following:
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var item = await DataItemSource.GetItemAsync((String)e.NavigationParameter);
var group = await DataItemSource.GetGroupByItemAsync(item);
this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Item"] = item;
}
Here I add a GetGroupByItemAsync(SampleDataItem item) method in DataItemSource which can retrieve the group according to the item.
public static async Task<SampleDataGroup> GetGroupByItemAsync(SampleDataItem item)
{
await _DataItemSource.GetSampleDataAsync();
// Simple linear search is acceptable for small data sets
var matches = _DataItemSource.Groups.Where(group => group.Items.Contains(item));
if (matches.Count() == 1) return matches.First();
return null;
}
Besides these, we also need to remove DataContext="{Binding Item}" form root Grid and put in in <Grid Background="#FF6996D1" DataContext="{Binding Item}">.
After this, the FlipView should be able to work. However here is a strange behavior, if we select the second or third image, the previous image in flip view won't show like following
We are investigating on this issue. As a workaround, we can disable FlipView's virtualization by changing its ItemsPanel like:
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
The complete XAML code of ItemDetailPage might like:
<Page x:Class="ImageGalerry.ItemDetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="using:ImageGalerry.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:data="using:ImageGalerry.Data"
xmlns:local="using:ImageGalerry"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
DataContext="{Binding DefaultViewModel,
RelativeSource={RelativeSource Self}}"
mc:Ignorable="d">
<Grid d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=/DataModel/DataItem.json, Type=data:DataItemSource}}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid Background="#FF6996D1" DataContext="{Binding Item}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1366" />
</Grid.ColumnDefinitions>
<Button x:Name="backButton"
Margin="39,59,0,0"
VerticalAlignment="Top"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"
AutomationProperties.Name="Back"
Command="{Binding NavigationHelper.GoBackCommand,
ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}" />
<TextBlock x:Name="pageTitle"
Margin="120,40,30,40"
VerticalAlignment="Top"
IsHitTestVisible="false"
Style="{StaticResource HeaderTextBlockStyle}"
Text="{Binding Title}"
TextWrapping="NoWrap" />
<!--<MediaElement x:Name="mediaplayer" Source="images/ost.mp3" AudioCategory="BackgroundCapableMedia" />
<Button x:Name="PlayButton" Content="Stop" Click="PlayButton_Click" Margin="1274,72,0,30" />-->
</Grid>
<Grid x:Name="contentRegion" Grid.Row="1" Background="#FF6996D1">
<FlipView ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Width="732"
Height="559"
Margin="84,20,0,49"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="{Binding ImagePath}" />
<ScrollViewer x:Name="myScroll"
Margin="852,60,50,91"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto">
<TextBlock Width="425"
Height="2210"
FontSize="27"
Text="{Binding Description}"
TextAlignment="Justify"
TextWrapping="Wrap" />
</ScrollViewer>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
</Grid>
</Page>
Please note that disabling UI virtualization for FlipView may negatively impact performance especially when there are a lot of images. If you have a lot of images, you can try to use incremental loading and data virtualization.

How to add columns to listview in windows phone 8.1,c#?

Hi I am struggling to add columns to listview in windows phone 8.1. I want 2 columns:
Column 1 = Item
Column 2 = Quantity
I have managed to add an item to a listview but the second item goes to the next row. I want both of the items to be displayed on the same row, so the second item should be displayed in a second column.
Here is my code
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var listViewItem = (new ListViewItem { Content ="Vanilla"});
var listViewItem2 = (new ListViewItem {Content ="1"});
listView.Items.Add(listViewItem);
listView.Items.Add(listViewItem2);
}

<ListView x:Name="itemListView"
Margin="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

In my opinion you should create an object that contains two properties:
public class ListViewItem
{
public int Index { get; set; }
public string Name { get; set; }
}
Then assign a object(s) you want to your ListView:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
var listViewItem = new ListViewItem { Name= "Vanilla", Index = 1 };
listView.Items.Add(listViewItem);
}
Then you can simply create a ItemTemplate for your ListView:
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Index}"/>
<TextBlock Grid.Column="1" Text="{Binding Name}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
I wrote this on the fly, so there might be some syntax errors :P

Binding ObservableCollection of List

In my Windows Phone application I have a listBox with ContentItems binding :
private ObservableCollection<ContentItemViewModel> _contentItems;
public ObservableCollection<ContentItemViewModel> ContentItems
{
get { return _contentItems; }
}
<ListBox x:Name="ContentListBox" Margin="0,117,12,0" VirtualizingStackPanel.VirtualizationMode="Standard" Logic1:TiltEffect.IsTiltEnabled="True" ItemsSource="{Binding ContentItems}" Tap="ContentListBox_Tap" MinHeight="656" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="vertical" >
<Grid Height="{Binding ItemHeight}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="itemIco1" Width="Auto" Height="Auto" HorizontalAlignment="Left" Source="{Binding IconURL}" Stretch="Fill" CacheMode="BitmapCache" VerticalAlignment="Top" Margin="5,5,5,5" Visibility="Visible"/>
<ListBox IsHitTestVisible="False" Grid.Column="1" VerticalAlignment="Center" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<TextBlock x:Name="ContentCategoryTitle" Height="70" Text="{Binding ContentTitle}" Width="460" Margin="5,34,0,0" TextTrimming="WordEllipsis" TextWrapping="NoWrap" FontSize="28" FontFamily="Segoe WP Semibold" Foreground="#FFF7F7F7" VerticalAlignment="Bottom" />
</ListBox>
</Grid>
<Rectangle Fill="#FF585858" Height="1" Margin="0,0,0,0" Width="460" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Is it possible to binding not an ObservableCollection<ContentItemViewModel>, but - ObservableCollection<List<ContentItemViewModel>> ?

Yes that is possible, if you have a collection of collections. Or why not this?
ObservableCollection<ObservableCollection<ContentItemViewModel>>
If you want your UI to be notified of collection changes to your sub collections.
Update
For example:
View Model
public ObservableCollection<ObservableCollection<ContentItemViewModel>> ContentItems
{
get { return _contentItems; }
set { _contentItems = value; // Notify of property change here, this allows you to change the ContentItems reference after view model construction }
}
public MyViewModel()
{
// Populate content items
this.ContentItems = new ObservableCollection
{
new ObservableCollection { new ContentItemViewModel() },
new ObservableCollection { new ContentItemViewModel(), new ContentItemViewModel() }
};
}
View
<ListBox ItemsSource="{Binding ContentItems}" ...>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<ListBox ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding MyContentItemViewModelProperty}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
<ListBox.ItemTemplate>
</ListBox>