Develop Reference

Uno-Platform Horizontal scroolling control

I'm new to Uno Platform and I created a new project to make some tests.
I would like to add a new control that allows horizontal panning, similar to stories in Instagram or the CollectionView in Net MAUI.
Till now I've tried with an horizontal ListView, but it only works in UWP, neither the Droid project nor Wasm or Skia project.
My actual XAML code is:
<Page
x:Class="UnoTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UnoTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
d:Width="500">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<!--Titol-->
<TextBlock
Grid.Row="0"
Text="DH Orders"
HorizontalAlignment="Center"
Margin="0,15,0,0"
FontSize="30"/>
<!--Imatge-->
<Border
Grid.Row="1"
Margin="25, 10, 25, 0"
CornerRadius="10"
Width="400"
Height="400">
<Border.Background>
<ImageBrush
Stretch="UniformToFill"
ImageSource="/Assets/condil.jpg"/>
</Border.Background>
</Border>
<TextBlock
Grid.Row="2"
Text="Order states:"
FontSize="15"
Margin="20, 20, 20, 0"/>
<!--Estats comanda-->
<ListView
Grid.Row="3"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.IsHorizontalRailEnabled="True"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.IsScrollInertiaEnabled="True"
ItemsSource="{Binding Options}"
IsItemClickEnabled="True"
Margin="10"
Height="100">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button
Content="{Binding Status}"
Margin="0, 10"
Padding="10"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>
Should I use a ScrollViwer + ItemsRepeater or is there any specific control for that purpose?

You are absolutely right! It seems it's a bug in Uno: I just reproduced it in the Uno Playground
New issue has been created in the Uno backlog. Thanks for reporting!

How to get ProgressRing from ListViewItem?

i have a ListView with following ItemTemplate
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:SubsceneDownloadModel">
<UserControl PointerEntered="ListViewSwipeContainer_PointerEntered"
PointerExited="ListViewSwipeContainer_PointerExited">
<Grid AutomationProperties.Name="{x:Bind Name}">
<SwipeControl x:Name="ListViewSwipeContainer" >
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{x:Bind Name}"
Margin="10,5,10,5"
FontSize="18"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<AppBarButton x:Name="DownloadHoverButton"
Margin="10,0,10,0"
HorizontalAlignment="Right"
IsTabStop="False"
Visibility="Collapsed"
Label="Download"
Icon="Download"
Click="DownloadHoverButton_Click"/>
<ProgressRing x:Name="prgStatus"/>
</Grid>
</SwipeControl>
</Grid>
</UserControl>
</DataTemplate>
</ListView.ItemTemplate>
I want the value of the ProgressRing to change when I click on the AppBarButton but the problem is AppBarButton is not accessible from item template, so how can i access progressring from itemtemplate?

move your itemtemplate to a new usercontrol
<UserControl
Name="subsceneView"
x:Class="HandySub.UserControls.SubsceneUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
PointerEntered="UserControl_PointerEntered"
PointerExited="UserControl_PointerExited">
<Grid>
<SwipeControl x:Name="ListViewSwipeContainer" >
<Grid AutomationProperties.Name="{x:Bind Name}">
<SwipeControl x:Name="ListViewSwipeContainer" >
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{x:Bind Name}"
Margin="10,5,10,5"
FontSize="18"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<AppBarButton x:Name="DownloadHoverButton"
Margin="10,0,10,0"
HorizontalAlignment="Right"
IsTabStop="False"
Visibility="Collapsed"
Label="Download"
Icon="Download"
Click="DownloadHoverButton_Click"/>
<ProgressRing x:Name="prgStatus"/>
</Grid>
</SwipeControl>
</Grid>
</SwipeControl>
</Grid>
</UserControl>
and in your listview
<ListView.ItemTemplate>
<DataTemplate x:DataType="model:SubsceneDownloadModel">
<usercontrol:SubsceneUserControl/>
</DataTemplate>
</ListView.ItemTemplate>

C# WPF - How to Change a 'Preferences' Window's Displayed Grid using a ListView?

I am currently in the process of making a 'Preferences' window in my C# WPF program.
The aim of this window is to have a ListView on the left, and a list of tweakable controls on the right.
Each item in the ListView directly corresponds to a Grid that contains all of the controls under the selected item's content.
Once the item in the ListView is changed, the current grid's visibility must be collapsed, and the grid that corresponds to the item selected's visibility must be changed to visible.
I thought that DataBinding might work for this, however I have no idea how to use it. Could someone please inform me how to implement this feature?
I have only one grid at the moment. The whole window looks like this:
<Window x:Class="DarkOrbit_Skill_Price_Calculator.DarkOrbit_Skill_Price_Calculator___Preferences"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DarkOrbit_Skill_Price_Calculator"
mc:Ignorable="d"
Title="DarkOrbit Skill Price Calculator - Preferences" Height="360" Width="640" WindowStartupLocation="CenterScreen" WindowStyle="ToolWindow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Name="ListView_PreferenceOption" Width="150" Margin="5" SelectionChanged="SelectionChanged_ListView_PreferenceOption">
<ListViewItem IsSelected="True">
<StackPanel Orientation="Horizontal">
<Image Source="Images\Installing Updates.png" Height="35"/>
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
</ListView>
<Grid Margin="5" Name="Grid_Update" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>
</Window>
I have absolutely no clue as to how to swap the grid depending on the index selected.

You can bind the visibility of each grid to the selected state of its corresponding list item by referencing the ListViewItem element. Something like this:
<Grid>
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="Converter" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ListView Width="150" Margin="5">
<ListViewItem IsSelected="True" x:Name="One">
<TextBlock Text="Update" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
<ListViewItem IsSelected="False" x:Name="Two">
<TextBlock Text="Foo" FontSize="14" FontFamily="Segoe UI"
VerticalAlignment="Center" Margin="5"/>
</ListViewItem>
</ListView>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=One, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Version Architecture" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
<Grid Margin="5" Grid.Column="1"
Visibility="{Binding IsSelected, ElementName=Two, Converter={StaticResource Converter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Label Content="Update Something Else" VerticalAlignment="Center"/>
<ComboBox IsReadOnly="True" Width="100" Margin="5">
<ComboBoxItem Content="64-Bit"/>
<ComboBoxItem Content="32-Bit" IsSelected="True"/>
</ComboBox>
</StackPanel>
</Grid>
</Grid>

For those who are having the same predicament and want to use C# code to make this work, I eventually thought of the following code:
StackPanel[] allGrids = { Grid_1, Grid_2, Grid_3, Grid_4, ... }; //Replace StackPanel with the
//type of control you are using, e.g. Grid or WrapPanel.
foreach (StackPanel grid in allGrids)
{
grid.Visibility = Visibility.Collapsed; //collapse all grids
}
allGrids[(your listview/other control).SelectedIndex].Visibility = Visibility.Visible;
//make the grid you need visible

WPF Listbox with textbox

I have a listbox with a textbox
The textbox is defined in a datatemplate that ends like this
<TextBlock Grid.Row="4" Grid.Column="0" Text="Note"></TextBlock>
<TextBox Height="Auto" Grid.Row="4" Grid.Column="1"
Text="{Binding PartData.Note}" AcceptsReturn="True" TextWrapping="Wrap" >
</TextBox>
</Grid>
I want the textbox to expand when the user enters multiple rows but it doesnt. The rowdefintion height is set to *

I've tried your sample with this code, and it works (use Shift-Enter to start a new row inside TextBox)
<Window x:Class="TextBoxWrap.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox Height="140" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Note"/>
<TextBox Margin ="10, 0,0,0" Height="Auto" Grid.Row="1" Grid.Column="1" Text="{Binding Count}"
AcceptsReturn="True" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>

You need to add
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
to TextBox so it takes all available space.

How to make a grid in a DataTemplate for a ItemTemplate auto-size to ListBox width?

So I have the following DataTemplate for a ListBox.ItemTemplate:
<DataTemplate x:Key="Tweet">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Source="{Binding ProfileImageURL}"
Width="50" Height="50"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
FontSize="15"
FontWeight="Bold"
Text="{Binding User}"/>
<TextBlock
Grid.Row="1" TextWrapping="Wrap"
Text="{Binding Status}"/>
<DockPanel
Grid.Row="2">
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="WrapWithOverflow"
Text="{Binding TimeAgo}" TextAlignment="Justify"/>
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="Wrap"
Text="{Binding Source}"/>
</DockPanel>
</Grid>
</Grid>
</DataTemplate>
The problem is that it doesn't auto-size to the ListBox. The text gets clipped:
TwitBy preview
How to fix it?
Here's the listBox XAML definition:
<ListBox
x:Name="tweetsListBox"
Margin="3,0"
Grid.Row="1"
Background="{x:Null}" Grid.IsSharedSizeScope="True"
ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemTemplate="{DynamicResource Tweet}"/>
Any help would be appreciated.
Thanks

Try this:
<DataTemplate x:Key="Tweet">
<Grid Width="{Binding ElementName=tweetsListBox, Path=ActualWidth>">