Silverlight control InitializeComponent freezes application - multithreading

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)

Related

Add a disabled/ non-selectable separator in a bound ComboBox

I have a ComboBox and I want to add a separator which is disabled, non-selectable.
Standard functions such as add, edit, delete should be selectable under the separator.
The items containing an image and text should be displayed above the separator.
<ComboBox Name="cmbTest">
<!--These items should be loaded by code or ViewModel.-->
<ComboBoxItem >Item1</ComboBoxItem>
<ComboBoxItem >Item2</ComboBoxItem>
<ComboBoxItem >Item3</ComboBoxItem>
<!--Separator which is disabled.-->
<ComboBoxItem IsEnabled="False" >
<NavigationViewItemSeparator BorderThickness="1"></NavigationViewItemSeparator>
</ComboBoxItem>
<!--Menu below the separator.-->
<ComboBoxItem x:Name="cmbiNewApplication">Neu</ComboBoxItem>
<ComboBoxItem x:Name="cmbiEdit">Bearbeiten</ComboBoxItem>
<ComboBoxItem x:Name="cmbiDelete">Löschen</ComboBoxItem>
<ComboBoxItem x:Name="cmbiImportApplication">Import</ComboBoxItem>
<ComboBoxItem x:Name="cmbiExportApplication" >Export</ComboBoxItem>
</ComboBox>
Currently, my ComboBox is tied to a ViewModel and I've created a TemplateSelector on advice. Unfortunately, the ComboBoxItem in the template doesn't seem to be the generated ComboBoxItem itself, so the IsEnabled property has no effect.
<ComboBox x:Name="cmbApplication"
CornerRadius="3"
Width="300"
ItemsSource="{x:Bind AppProcessMainViewModel.AppProcesses}"
Tapped="cmbApplication_Tapped" >
<ComboBox.ItemTemplateSelector>
<local:MenuDataTemplateSelector>
<local:MenuDataTemplateSelector.DefaultTemplate>
<DataTemplate x:DataType="local:AppProcess" >
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal" Opacity="{x:Bind BoolToOpacity(Activated), Mode=OneWay}">
<TextBlock Text="{x:Bind Description, Mode=OneWay}"></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</local:MenuDataTemplateSelector.DefaultTemplate>
<local:MenuDataTemplateSelector.MenuTemplate>
<DataTemplate x:DataType="local:AppProcess">
<ComboBoxItem IsEnabled="False" Height="22" >
<NavigationViewItemSeparator BorderThickness="1"></NavigationViewItemSeparator>
</ComboBoxItem>
</DataTemplate>
</local:MenuDataTemplateSelector.MenuTemplate>
</local:MenuDataTemplateSelector>
</ComboBox.ItemTemplateSelector>
</ComboBox>
My consideration was that I set the IsEnabled property of the item in the Tapped event of the combo box.
Unfortunately, I really can't figure out how to get the property of the ComboBoxItem by index.
How can I set the property?
Is this really the best approach (TemplateSelector and setting the property in the Tapped event)?
I've already read a lot about this and unfortunately there seems to be a lot missing in WinUI 3 in contrast to UWP/WPF that make things much easier.
I'm trying to get the item via the index and cast it, but there seems to be another problem, maybe because of the ViewModel?
Something like...
//Error
auto cb = cmbApplication().Items().GetAt(1).as<winrt::Microsoft::UI::Xaml::Controls::ComboBoxItem>();
I came across this site of the MS documentation (Find DataTemplate Generated Elements) and just tried it out, which works wonderfully... happy new year!
auto item = cmbApplication().ItemContainerGenerator().ContainerFromItem(cmbApplication().Items().GetAt(3));
item.as< winrt::Microsoft::UI::Xaml::Controls::ComboBoxItem>().IsEnabled(false);

Listbox keeps repeating first items

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.

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>

WPF - Border with a OpacityMask/VisualBrush: Memory Leaks

A brief explanation about my app:
the application in which I'm working on is such a greeting cards designer. Imagine something in which there is a background image, and an indefinite number of "layers" (in particular, pictures) that stay over the background and can be moved, resized, moved front and back, etc...
It is also possibile to apply particular shapes to these layers, like a star, an ellipse, .. and after the card is made, it's possibile to save is to jpeg file.
The problem
Everything works correctly, but I detected that when a shape is applied to a layer, a memory leak is generated.
Here is the code of the UserControl of each layer:
<UserControl>
.....
<Grid x:Name="_myGrid" >
<Border x:Name="im_the_problem" BorderThickness="0" OpacityMask="{Binding Path=MyMask.Data, Converter={StaticResource MaskConverter}}">
<!-- My Image... -->
</Border>
</Grid>
</UserControl>
where MaskConverter code is the following:
public class MaskConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
String maskData = value as String;
if (maskData == null)
return null;
if (maskData == "")
return null;
VisualBrush vb = new VisualBrush();
vb.Visual = XamlReader.Parse(maskData) as Visual;
return vb;
}
public object ConvertBack(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
throw new NotSupportedException();
}
}
The Parameter "MyMask.Data" is a XAML Path (that is the shape that I'm applying) that I dinamically load from a textfile that contains different shapes.
So, the principle is that if I have the border named *im_the_problem*, the memory is NOT released. If I comment *im_the_problem* (so I'll just have rectangular layers/pictures without shapes) everything work like a charm, without memory leaks.
The problem should be in the OpacityMask + VisualBrush.
Am I doing something wrong?
Or is there a known problem? Is there a way to do the same (apply a shape to a picture..) in a different manner?
Thanks.
You might be able to try binding the MyMask.Data to an actual Path.Data, and setting the Path.Fill to an ImageBrush created from the image?
You need to freeze your VisualBrush ;)
I had this problem in a DataGrid's column template where I was using a <Canvas><Path /></Canvas> (as a static-resource) into a VisualBrush (also a static-resource) and using that as the OpacityMask for a Rectangle. Whenever the DataGrid was reloaded the Rectangle wouldn't release VisualBrush references to the OpacityMask, I used a memory-profiler tool to reveal that all the VisualBrush objects were using the bulk of memory.
I don't understand why or how this happened - but I'm glad I'm not alone (even if I had the same problem some 6.5 years later...).
My XAML was something like this:
<DataGrid.Resources>
<Canvas x:Key="icon" ...>
<Path ... />
</Canvas>
<VisualBrush x:Key="iconBrush" Stretch="Uniform" Visual="{StaticResource icon}" />
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
OpacityMask="{StaticResource iconBrush}"
/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
...
</DataGrid.Columns>
I read that setting IsFrozen = true (done using this technique: https://www.codeproject.com/Tips/72221/Freeze-brushes-directly-in-the-XAML-to-improve-you ) would help memory issues with Brushes, however this seemingly had no effect at all. Weird.
I thought I'd experiment and I reasoned that if the issue was leaking the VisualBrush then I wondered if having it as a StaticResource was messing with object-references, so I changed it to an "owned" object, like so:
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
>
<VisualBrush Stretch="Uniform" Visual="{StaticResource iconBrush}" />
</Rectangle>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
This fixed the issue! And I still don't know why - I wonder if it's a bug in WPF?
On a related note, I came to realise that using a VisualBrush was overkill as I'm rendering just a simple Path - VisualBrush is expensive because it renders an entire WPF view - I also learned from other documentation that Path itself isn't necessary for rendering simple shapes because itself is a complete UIElement and FrameworkElement - which are "heavier" types.
I changed my code to store the path in a PathGeometry value inside a GeometryDrawing static-resource which is loaded into a DrawingBrush:
<GeometryDrawing x:Key="iconDrawing" Brush="Black" Geometry="..." />
<Rectangle
Fill="{Binding Foreground, ElementName=myDataGrid}"
Width="14"
Height="14"
Margin="4"
Visibility="{Binding IconVisibility}"
OpacityMask="{StaticResource iconBrush}"
>
<DrawingBrush Stretch="Uniform" Drawing="{StaticResource iconDrawing}" />
</Rectangle>
Doing this also made a dent in memory usage, and hopefully, performance.
In your project I see you're not using the path information as a resource, but the same technique applies: load your path into a PathGeometry (or rather, StreamGeometry object, which is even faster and is meant for immutable geometry) and set that as the Drawing for a DrawingBrush.

Resources