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!
Related
Right now I have this XAML layout for my WPF application:
<Window x:Class="Cabrillo_Editor.MainWindow"
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:Cabrillo_Editor"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_Exit" Click="ExitApplication"/>
<MenuItem Header="_New"/>
<MenuItem Header="_Save" Click="SaveCabrilloFile"/>
</Menu>
<StackPanel>
<GroupBox Height="Auto" Header="General">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="185"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0" Margin="0,0,0,5">
<Label>My Call:</Label>
<TextBox Width="120" Name="CallsignTextBox" HorizontalAlignment="Right" CharacterCasing="Upper"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="0">
<Label>My Grid:</Label>
<TextBox Width="120" Name="GridTextBox" HorizontalAlignment="Right"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="2">
<Label>Contest:</Label>
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="2" Grid.Column="2">
<Label>Assisted:</Label>
<CheckBox VerticalAlignment="Center" Name="AssistedCheckBox" Margin="5,0,0,0"/>
</DockPanel>
<DockPanel Grid.Row="0" Grid.Column="4">
<Label>Band:</Label>
<ComboBox Width="150" Name="BandComboBox" Margin="5,0,0,0"/>
</DockPanel>
</Grid>
</GroupBox>
</StackPanel>
</DockPanel>
</Window>
And it looks like this:
Why, for example, is are the ComboBoxes so streched if I set the row height to "Auto" (same for the TextBoxes)?
Is there a better way to make consistent horizontal space between the columns?
This is occurring because those controls will stretch to fill their parent container by default. To override this, simply set the VeriticalAlignment property and Height property (if needed).
<ComboBox Width="150" Name="ContestComboBox" Margin="5,0,0,0" VerticalAlignment=Top/>
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>
I have a UserControl, empty StackPanel like following.
<Grid>
<StackPanel x:Name="datawrapper" Orientation="Horizontal" Background="Yellow"/>
</Grid>
Main window's XAML is like following.
<ScrollViewer Grid.Row="2" Grid.Column="0" Background="Gray">
<StackPanel x:Name="holderpanel" Orientation="Vertical"/>
</ScrollViewer>
I want to put datawrapper into holderpanel from the Main Window's code behind programmatically.
If there's control in the datawrapper, dadawrapper is inserted into holder panel.
However, in case of empty StackPanel, never inserted.
How to do this?
To help you clarify your question, I'll provide an example of exactly what you asked for:
<Grid>
<ScrollViewer Grid.Row="2" Grid.Column="0" Background="Gray">
<StackPanel x:Name="holderpanel" Orientation="Vertical"/>
</ScrollViewer>
<Grid>
<StackPanel x:Name="datawrapper" Orientation="Horizontal" Background="Yellow">
<TextBlock Text="Test"/>
</StackPanel>
</Grid>
</Grid>
codebehind (for this example, I added to Loaded event handler, but it could be used elsewhere):
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
if (datawrapper.Children.Count > 0)
{
var grid = datawrapper.Parent as Grid;
grid.Children.Remove(datawrapper);
holderpanel.Children.Add(datawrapper);
}
}
The datawrapper should be separated user control and empty like following.
<Grid>
<StackPanel x:Name="datawrapper" Orientation="Horizontal" Background="Yellow"/>
</Grid>
I will add another user controls into the datawrapper horizontally 5 later. That user control is like following.
<UserControl x:Class="WpfTest.ResultItem"
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"
xmlns:local="clr-namespace:WpfTest"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid x:Name="resultitem">
<Border CornerRadius="5" BorderBrush="#e0e0e0" Background="White" BorderThickness="2" DockPanel.Dock="Top" Margin="10 10 10 15">
<Grid Margin="0 30 0 30" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Chart#" Width="Auto" Height="30" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Patient Name" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0" Text="Home Phone#" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Cell Phone#" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0" Text="Patient Type" Width="Auto" Height="Auto" Margin="5 5 0 5" FontSize="20" VerticalAlignment="Center"></TextBlock>
</Grid>
</Border>
</Grid>
If the datawrapper is filled with 5 ResultItems, datawrapper will added into the holderpanel vertically.
I have created a application for windows 10 (uwp) devices. I´m using the windows appstudio "designer". Now, I have to update the source code by a combobox and the correct eventhandler.
The combobox items contains different urls. After the selection changed, I have to parse entries from a url.
Layout-file:
<Page
x:Class="App.Pages.NeuigkeitenListPage"
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:was_actions="using:AppStudio.Uwp.Actions"
xmlns:was_commands="using:AppStudio.Uwp.Commands"
xmlns:was_controls="using:AppStudio.Uwp.Controls"
xmlns:list_layouts="using:Wallfahrtsapp.Layouts.List"
xmlns:controls="App.Layouts.Controls"
xmlns:vm="using:App.ViewModels"
xmlns:triggers="using:App.Triggers"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
d:DataContext="{d:DesignData Source=/Assets/Design/DesignData.json, Type=vm:DesignViewModel, IsDesignTimeCreatable=true}"
mc:Ignorable="d">
<Page.Resources>
<was_controls:VisualBreakpoints x:Name="ResponsiveBehaviorsVBP" ConfigFile="/Assets/ResponsiveBehaviorsVBP.json"></was_controls:VisualBreakpoints>
</Page.Resources>
<Grid Background="{StaticResource AppBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2" Background="{StaticResource AppBarBackground}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="48"/>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="{Binding Active.pageTitleMargin, Source={StaticResource ResponsiveBehaviorsVBP}}" Text="{x:Bind ViewModel.PageTitle}" Foreground="{StaticResource AppBarForeground}" FontSize="{StaticResource AppTitleTextSizeDefault}" VerticalAlignment="Center" HorizontalAlignment="Left" TextTrimming="CharacterEllipsis" MaxLines="1"/>
<was_actions:ActionsCommandBar
x:Name="appBar"
ActionsSource="{x:Bind ViewModel.Actions}" Style="{StaticResource WasCommandBarStyle}"
Foreground="{StaticResource AppBarForeground}"
IsVisible="{x:Bind ViewModel.HasActions}"
Background="{StaticResource AppBarBackground}"
Grid.Row="{Binding Active.appBarRow, Source={StaticResource ResponsiveBehaviorsVBP}}"
Grid.Column="{Binding Active.appBarColumn, Source={StaticResource ResponsiveBehaviorsVBP}}"
Grid.ColumnSpan="{Binding Active.appBarColumnSpan, Source={StaticResource ResponsiveBehaviorsVBP}}" Opened="appBar_Opened">
</was_actions:ActionsCommandBar>
<ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="3"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ProgressBar Grid.Row="1" Height="3" Margin="0,6,0,6" IsIndeterminate="True" Foreground="{StaticResource PageTitleForeground}" Visibility="{x:Bind ViewModel.IsBusy, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=Collapsed, Mode=OneWay}"/>
<was_controls:ErrorNotificationControl x:Uid="ListErrorNotificationControl" Grid.Row="2" ErrorVisibility="{x:Bind ViewModel.HasLoadDataErrors, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" ErrorColor="{StaticResource PageTitleForeground}" Margin="10,0,18,0"/>
<list_layouts:ListContactCard Grid.Row="1" ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}" ItemClickCommand="{x:Bind ViewModel.ItemClickCommand}" OneRowModeEnabled="False" Margin="31,0,0,3" Grid.RowSpan="3" />
<ListBox></ListBox>
</Grid>
</ScrollViewer>
<TextBlock HorizontalAlignment="Left"
x:Name="source"
TextWrapping="Wrap"
Text="Newsquelle auswählen:"
VerticalAlignment="Top"
FontFamily="Segoe UI"
FontStyle="Oblique"
Padding="40" Margin="384,-30,0,0" Height="78"
/>
<ComboBox x:Name="sourceComboBox"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="200"
SelectionChanged="selectionChanged"
>
<ComboBoxItem Content="Url1"/>
<ComboBoxItem Content="Url2"/>
</ComboBox>
<controls:DataUpdateInformationControl Grid.Row="2" Grid.ColumnSpan="2" LastUpdateDateTime="{x:Bind ViewModel.LastUpdated, Mode=OneWay}" Color="{StaticResource PageTitleForeground}" Margin="8,4,8,4" HorizontalAlignment="Left" HasLocalData="{x:Bind ViewModel.HasLocalData}"/>
</Grid>
C#- file: Eventhandler
private void selectionChanged (object sender , SelectionChangedEventArgs args)
{
index = sourceComboBox.SelectedIndex;
Debug.WriteLine("selectionChangedEventMethod");
newsblogHTTP(index);
}
But how can I update my layout with the new content?
If you need more code snippets let´s see the repo for my project.
layout-file : https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Pages/NeuigkeitenListPage.xaml
https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Pages/NeuigkeitenListPage.xaml.cs
C#-Config file:
https://github.com/MasterCoder1992/BlutWallfahrtWindows10/blob/version/march2k17Y/Wallfahrtsapp.W10/Sections/NeuigkeitenConfig.cs
Thanks for your help!
how can I make the scrollviewer resize to the bottom edge of the screen, so as to maximize to resize with the mouse ? The way the code is, when the screen is maximized the scroll bar does not appear and it is not possible to scroll the contents.
My xaml File
<Window x:Class="AppSearch.MainWindow" x:Name="mainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AppSearch" Height="600" Width="820"
WindowStartupLocation="CenterScreen"
Loaded="Window_Loaded"
StateChanged="mainWindow_StateChanged"
ResizeMode="CanResize"
PreviewKeyDown="mainWindow_PreviewKeyDown">
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="stkContentLeft"
MinWidth="510"
MinHeight="560"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
LoadCompleted="stkContentLeft_LoadCompleted"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0,0,05,0" Grid.Column="0"/>
<StackPanel Grid.Column="1" x:Name="stckContentRight" Width="276"
Height="{Binding Parent.ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}"
Orientation="Vertical"
HorizontalAlignment="Right">
<Grid VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackPanel Height="auto" Grid.Row="0">
<StackPanel x:Name="help" Width="20" Height="20" HorizontalAlignment="Right" Margin="0,5,10,0">
<Image Source="Imagens/help_icon.png"/>
</StackPanel>
<StackPanel x:Name="stkUcSupervisor" Height="50" Width="276" Margin="0,5,0,0" HorizontalAlignment="Center"/>
<TextBox x:Name="txtSearch"
ToolTip="put your key..."
FontSize="13"
Foreground="Black"
BorderThickness="1"
TextWrapping="Wrap"
Margin="0,5,0,05" Width="270" HorizontalAlignment="Center"/>
</StackPanel>
<ScrollViewer x:Name="scroll"
CanContentScroll="True"
IsDeferredScrollingEnabled="False"
UseLayoutRounding="False"
VerticalScrollBarVisibility="Visible"
VerticalAlignment="Top"
BorderThickness="1"
BorderBrush="Gray"
Margin="0,05,0,0"
Grid.Row="1"
Height="455">
<StackPanel x:Name="stkListOfUserControls"
CanVerticallyScroll="True"
Height="455"
OverridesDefaultStyle="False">
<StackPanel.ScrollOwner>
<ScrollViewer AllowDrop="True" />
</StackPanel.ScrollOwner>
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
<StackPanel x:Name="stkPopUp"
Canvas.Bottom="0"
Canvas.Left="0"
Height="285"
Width="280"
VerticalAlignment="Bottom"/>
</Grid>