Listbox keeps repeating first items - windows-10

I have a simple listbox that loads items (in my test case 135).
I logged all the ID's of the items that are loaded, and they all have a unique ID. The listbox datatemplate is a usercontrol, so in the usercontrol I also logged the ID's to see which ones are loaded.
Now is where it starts going wrong, it only loads about the first 10 items (I think whatever is initially visible), and then keeps repeating those first items over and over again. So instead of 135 unique objects, I have 135 objects that are one of the first 10 or so loaded.
You can see the logging here (there are a lot more ID's not visible):
After the User Control ID's line, that's the only ID's it loads and keeps looping those 10 ID's until there are 135 items in the listbox.
This is the full page code
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderThickness="3">
<ContentControl x:Name="ContentContainer"
VerticalContentAlignment="Top"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<SearchBox x:Name="sbSearch" QuerySubmitted="sbSearch_QuerySubmitted" Margin="12,12,12,0"></SearchBox>
<ListBox x:Name="lbResults" Grid.Row="1" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<userControls:WantlistItem Tag="{Binding}"></userControls:WantlistItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
What am I doing wrong?
Edit1: Loading of listbox in main page
private void Page_Loaded(object sender, RoutedEventArgs e)
{
if(Variables.WantsAll == null) Helpers.GetWantList();
foreach (var v in Variables.WantsAll)
{
Debug.WriteLine(v.id);
}
Debug.WriteLine("--- USER CONTROL ID's ---");
lbResults.ItemsSource = Variables.WantsAll;
}
In the UserControl Page_Loaded I'm logging them as well.
In this screenshot you can see I scrolled down, and it starts repeating the same items again (sometimes it messes up, as you can see the first item is not correctly repeated, it's a different one).
Note that in front of the names I added the ID's it prints out, you can see it's repeating the same ID's (for example the green album: 1301162), even tho in the list I set as ItemsSource it only exists once (all items are unique).

The comment provided by Jay Zuo - MSFT provided the solution, the answer in this thread solved my problem exactly.

Related

Uno Platform Material Card Use Pathicon

I am using a Material Card on my Uno based app. It works great- except I am trying to add a Pathicon for MediaContent and am having trouble getting it to work. I tried overriding the Image source in the template- but that did not work- I may not have done that right. Essentially I want a Pathicon where the .png or jpg would go. Any suggestions on how to accomplish this would be appreciated.
<material:Card HeaderContent="Outlined card"
SubHeaderContent="With title and subtitle only"
MediaContent=""
Style="{StaticResource MaterialOutlinedCardStyle}"
PointerExited="eventPageClick">
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
<material:Card.MediaContentTemplate>
<DataTemplate>
<Image Source="{Binding}"
Stretch="Uniform"
MaxHeight="194" />
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>
Great question!
Using the MediaContentTemplate, you should be able to place anything that you want in the DataTemplate, including PathIcons. Only thing is that the MediaContentTemplate will only be loaded if the MediaContent property is not null or an empty string. So I would do something like setting the the Path Data string to MediaContent and then use a Binding in the MediaContentTemplate to the PathIcon's Data property, like so:
<material:Card HeaderContent="Outlined card"
SubHeaderContent="With title and subtitle only"
MediaContent="PASTE PATH DATA HERE"
Style="{StaticResource MaterialOutlinedCardStyle}"
PointerExited="eventPageClick">
<controls:Card.MediaContentTemplate>
<DataTemplate>
<PathIcon Data="{Binding}"/>
</DataTemplate>
</controls:Card.MediaContentTemplate>
...
</material:Card>
Thank you sbilogan! You gave me the key to getting it working. They key was the text cant be empty for Media Content. It turns out I can put any text there and then add the Pathicon like below and that works. Thank you so much for your help!
<material:Card HeaderContent="Outlined card3"
SubHeaderContent="With title and subtitle only"
Style="{StaticResource MaterialOutlinedCardStyle}"
MediaContent="Example"
PointerExited="eventPageClick">
<material:Card.HeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,14,16,0"
Style="{ThemeResource MaterialHeadline6}" />
</DataTemplate>
</material:Card.HeaderContentTemplate>
<material:Card.SubHeaderContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="16,0,16,14"
Style="{ThemeResource MaterialBody2}" />
</DataTemplate>
</material:Card.SubHeaderContentTemplate>
<material:Card.MediaContentTemplate>
<DataTemplate>
<PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Data="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</DataTemplate>
</material:Card.MediaContentTemplate>
</material:Card>

Windows 10 Universal app flyout, how to remove scrollbars?

I've got a Flyout view with a TextBlock in it. The text block has more than one line's amount of text and I'd like it to wrap to the next line like it usually does, but when used in a Flyout it scrolls off the screen... How do you disable the scroll view in a Flyout?
Flyout XAML:
...
<AppBarButton.Flyout>
<Flyout Placement="Full">
<local:MyView/>
</Flyout>
</AppBarButton.Flyout>
...
My View XAML:
<UserControl ...>
<Grid>
...
<TextBlock Text="Loading..." Style="{ThemeResource SubtitleTextBlockStyle}" Margin="10,0,10,20" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</UserControl>
It comes out like this:
To set properties of Flyout like width or scrollbar's visibility, we need to customize the style of FlyoutPresenter. Here is how I do it:
<Flyout Placement="Full" >
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"></Setter>
</Style>
</Flyout.FlyoutPresenterStyle>
<Grid>
<TextBlock Text="This is an informational flyout. Click outside to dismiss.xxxjfdalisfsadpfuaspdfoia" Grid.Row="1" TextWrapping="Wrap"/>
</Grid>
</Flyout>
Directly copy the into your Flyout element will meet your requirement.
You can
1) make a maxwidth to your flyout
or
2) try this :
<Flyout Placement="full" >
<Grid ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
........
</Grid>
</Flyout>
best of luck !

Header template and title

Let say that we have the above xaml in wp7 platform:
<controls:Panorama x:Name="MainPanorama">
<controls:PanoramaItem x:Name="Panorama1" TabIndex="1">
<controls:PanoramaItem.Header>
<StackPanel Orientation="Vertical" Margin="12,70,0,-30">
<TextBlock x:Name="Header1" Text="Downloader" FontSize="50" Margin="-5,-70,0,0" />
</StackPanel>
</controls:PanoramaItem.Header>
///////////////////////////////
other xaml code like grids and other
</controls:PanoramaItem>
///////////////////////////////
other xaml code like PanoramaItems
</controls:Panorama>
How can i get the TextBlock.Text (string) of Header1, notice that i want something dynamically as i have many PanoramaItems and i want to get header of every PanoramaItem dynamically like an array of MainPanorama.
I have tried this:
PanoramaItem gen_panorama = MainPanorama.SelectedItem as PanoramaItem;
gen_panorama_head = Convert.ToString(gen_panorama.Header);
but there is no Header as the header is in template of every PanoramaItem, how can i get this?
I found the solution with 'Binding' header data template!
<controls:Panorama x:Name="MainPanorama">
<controls:Panorama.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Margin="12,70,0,-30">
TextBlock Text="{Binding}" FontSize="50" Margin="-12,-70,0,0" HorizontalAlignment="Left" Foreground="Black" />
</StackPanel>
</DataTemplate>
</controls:Panorama.HeaderTemplate>
<controls:PanoramaItem Header="Here any we want" x:Name="Panorama1" TabIndex="1">
</controls:PanoramaItem>
</controls:Panorama>

Silverlight control InitializeComponent freezes application

I have a control that I create hundreds of times during the application.
I have noticed that my app freezes because in the Initializecomponent function,
there is
System.Windows.Application.LoadComponent(this, new System.Uri("/fa;component/Controls/Common/Popup/PopupItem.xaml", System.UriKind.Relative));
if I comment this out, the application runs smoothly (of course without the control rendered).
How can I avoid/increase performance so the XAML won't be loaded each time, but somehow to recycle the control??
for (int i = 5; i < colValues.Count; i++)
{
if (colValues[i].Count == "1")
continue;
PopupItem pi = new PopupItem(colValues[i], false, this, FilterCategorySearch.PopupContent);
FilterCategorySearch.PopupContent.spItemsContainer.Children.Add(pi);
}
and the XAML is
<UserControl x:Class="FacetedSearch.Controls.Common.Popup.PopupItem"
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:FacetedSearch.Controls.Common"
mc:Ignorable="d">
<UserControl.Resources>
<SolidColorBrush x:Key="TextNormalBrush" Color="#FF656565"/>
<SolidColorBrush x:Key="TextHoverBrush" Color="#FFA39F9F"/>
</UserControl.Resources>
<StackPanel MouseEnter="LayoutRoot_MouseEnter" MouseLeave="LayoutRoot_MouseLeave" Orientation="Horizontal" Margin="0,4,0,0">
<local:CTLCheckBox x:Name="cbFilter" MouseLeftButtonUp="cbFilter_MouseLeftButtonUp" Cursor="Hand" Height="14" Width="10" Margin="4,0" />
<TextBlock x:Name="tbFilterName" Foreground="{StaticResource TextNormalBrush}" MouseLeftButtonUp="tbFilterName_MouseLeftButtonUp" TextWrapping="Wrap" FontFamily="Arial" Margin="0,0,4,0" Cursor="Hand"/>
<TextBlock x:Name="tbFilterCount" TextWrapping="Wrap" Foreground="{StaticResource TextNormalBrush}" FontFamily="Arial"/>
</StackPanel>
thanks
The xaml for UserControls is parsed by Silverlight for every new instance of the UserControl. This means that if you add 100 instances of the same UserControl, the xaml will be read, parsed, instantiated as objects then visual objects 100 times.
You have 2 possibilities:
Access your UserControl from another location by referencing it from within a DataTemplate (used by means of, say, a ContentControl)
Rewrite your UserControl to be a "real" control (i.e. a sublass of Control or ContentControl)

Adding an item to ItemControl which is not from binding Items Source

I am working on generating a list of check boxes with the first check box to be "SelectAll". SelectAll checkbox will check or uncheck all the check box in the list. However my check list is binding to a data source. Right now I want to put all check box including selectAll check box in the same wrappanel so that they can be wrapped together at the end of the panel.
<ContentControl Name="FilterContent">
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<CheckBox Name="SelectedAll" MinWidth="100" Margin="2"
VerticalAlignment="Center" HorizontalAlignment="Left"
IsChecked="{Binding IsSelectAll, Mode=TwoWay}"
Content="{Binding Path=SelectAllText}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cmd:EventToCommand Command="{Binding Path=OnClickCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
<ItemsControl ItemsSource="{Binding StandardItems}"
Margin="2,5,2,-1"
BorderBrush="{x:Null}"
Background="Transparent"
Grid.ColumnSpan="2"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Name="ItemsPanel" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox Name="ItemCheckBox"
MinWidth="100" Margin="2"
VerticalAlignment="Center" HorizontalAlignment="Left"
IsChecked="{Binding Path=IsChecked, Mode=TwoWay}"
Content="{Binding Path=Label}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</WrapPanel>
</ContentControl>
This piece of code does not allow me to do that, the result UI only have the items inside item control wrapped in the second line but not consider all check box in the same wrappanel. I need help on adding "SelectAll" check box to the wrappanel that is used by itemscontrol.
Thank you!
When loading the control I would add an empty StandardItem in the StandardItems list which will mean "select all". When I process the checkbox click event, I check if the item is an empty item and I use this as a call to "select all"

Resources