Hide objects/User Controls within WrapPanel? - vb.net

I've got a WrapPanel which will contain several different custom UserControls. Depending on the scenario, I may need to filter down which UserControls are visible. My goal is that I can switch which controls are visible on the fly by showing/hiding the controls that need to be filtered - thus shifting the controls that are left showing, to the top-left of the panel.
Right now I am simply setting the Visibility property of the control to Visibility.Collapsed when I don't want them to appear. I thought that because I was using a WrapPanel, the rest of the controls would shift to the top-left of the panel.
Instead, after hiding some of the UserControls, the controls that are still visible stay exactly where they were before, and I am left with gaps between the controls that are still showing. I've opened my app in Silverlight Spy, and it shows that the UserControls are still actually there (which makes sense) but are simply invisible.
So my question is:
Is there a way that I can show/hide UserControls within a WrapPanel which allows the still-visible UserControls to slide to their new positions (all shifting towards the top left - similar to a StackPanel)?
I've debated removing the UserControls completely from the WrapPanel (I think this would work) and storing them in memory until they are needed. Then if I wanted to show/hide other controls, I would get them from my in-memory object. It seems like there should be a better way to do this though.
If anyone has any suggestions or advice, it would be greatly appreciated. Thanks!
-Lloyd
UPDATE:
XAML: (very simple)
<toolkit:WrapPanel x:Name="MyLayout" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" />
Code-Behind: The UserControls are getting added dynamically:
MyLayout.Children.Add(oUserControl)
And they are getting set to collapsed dynamically as well:
oUserControl.Visibility = Visibility.Collapsed

I think I've found the problem. We added the WrapPanel to a ScrollViewer recently, and when I took the ScrollViewer out I was able to achieve the functionality I wanted.
I'm not sure why the ScrollViewer would have that effect though?
Also, I've found that I can leave the ScrollViewer in place and simply call .Measure() on the WrapPanel to update the layout.
Neither option makes 100% sense to me, but they do both seem to work.

Related

Determine Source of XAML Styling

I have a couple of ListViews on different pages in my UWP application. For some reason, one of them seems to have Padding along the bottom below the last ListViewItem, while the other does not.
Neither of them has bottom Padding specified, so I'm wondering if this could be inherited from a parent control? I searched the entire XAML of the one with Padding, and it is not set anywhere else either. It isn't a huge problem, but I would prefer my controls to be consistent throughout my application, and I think adding the bottom Padding to the ListView without it to make them match seems silly, especially when I am unsure of why the first one has Padding in the first place.
Is there somewhere to determine where properties are set in the hierarchy, similar to the way CSS works?
Here is what they look like:
No padding:
Padding:
I added a Background to the ListView control to verify that there is no Padding there..
So it would seem it would have to come from the ListViewItem itself, but it does not have the Padding property set.
The issue turned out to be that one of the parent controls of the ListView that was displaying correctly (how I wanted it to) had a VerticalAlignment="Top" set, while all the parents of the other ListView were set to VerticalAlignment="Stretch".
I was finally able to get XAML Spy working properly, and it was helpful in previewing the changes while the application was running so that I could determine which element I needed to set the VerticalAlignment on without recompiling over and over again. Thanks to #ChrisW for the recommendation.

Fill width on Windows Phone 8.1

I'm developing an application using the Windows Phone 8.1 SDK, I write UI descriptions using XAML markup.
I can't get a text box to fill width.
I see similar questions already posted but they involve ListView.
I'm really confused. There seems to be no proportional sizing options.
Tutorials show the use of explicit pixel counts in design.
Is that really the preferred method on Windows? How am I supposed to
deal with unpredictable screen sizes in Windows?
The items which I had, which were failing to fill their parent, were inside a ContentControl. The ContentControl correctly filled its width, but its child, which was a Grid, would not.
I found the solution here – https://stackoverflow.com/a/17627257/5476004 – and I will echo that solution here in case this post is found by someone else searching about the same problem.
The ContentControl requires two special properties in order for its child element to fill the parent. They are HorizontalContentAlignment and VerticalContentAlignment. Like so":
<ContentControl Name="MyContent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
…
</ContentControl>
Fill now occurs correctly.

Xaml Grid Visibility Transitions

Since I cannot find any official documentation about it I need to ask this questions. Is there any way to animate grids on visibility change?
I have tried adding TransitionCollections to grids but it works only the first time that grid initialized.
I also tried this answer but it also wont work because Grid.Loaded event fires even if grid is collapsed.
You can use event Loaded(). Just add attributes in XAML
x:DeferLoadStrategy="Lazy" Visibility="Collapsed"
and element will be completely collapsed.
To load it use somewhere in C# code standart:
SomeHiddenElement.Visibility = Visibility.Visible;

VariableSizedWrapGrid does not size correctly if control size modified in code

I am creating a UWP app and I am using the VariableSizedWrapGrid control. I am binding the Width of the a ComboBox in the grid to it the ComboBox width resizes based on the entries in the list. ( I am using a simple property exposed through my view model.) When I had the items in a StackPanel with a Horizontal orientation it worked fine. See picture below
The challenge of course is that on a smaller screen I need the fields to wrap around. So I switched the StackPanel to a VariableSizedWrapGrid. However, when I do that, the Grid does not seem to be handling the resizing of the ComboBox correctly as I get what is shown below. (See the ComboBox is now cut off
Any suggestions on how to resolve this would be greatly appreciated.
You are using the wrong Panel for the job. The one you're looking for is a WrapPanel (which doesn't exist actually though), but there are some implementations available, eg.: http://codepaste.net/8gr5go

Animate TranslateTransform on GridViewItem

I have a series of items in a GridView.
I want to animate the TranslateTransform of a GridViewItem so that it is outside the boundary of the GridView. When I do, it is clipped. Is this type of transform possible?
Sadly, I don't think so. I had to do something similar a while ago and it turns out that the template of a GriView (and ListView, ListBox, etc...) contains a ScrollViewer control. The thing about the ScrollViewer controls is that they MUST define a clipped viewport to give the user the impression of scrolling. In fact, if you were to decompile the ScrollViewer control, you can see that it hard codes the clipped bounds, so you cant even change the template or style.
Things may have changed since I looked into this, and my investigations where on WPF not XAML in Windows 8, but I dont think that it would have changed based on your description of the issue.
Here is a SO question in relation to this topic: WPF clipping even when no clipping is desired - how to turn it off?