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.
Related
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.
I have a requirement to create a button in a Windows 8.1 app which has an icon and a text label. The icon will be a symbol from Segoe UI Symbols and the text label will be Segoe UI Semibold at a smaller text size.
I want to be able to reuse the button in different places within the app, using different icons and text labels.
How show I go about this? I could create a button and then edit the ContentPresenter to have a horizontally oriented stack panel with two TextBlocks, but then how could I reuse this? And how could I change the text in the two different text blocks?
Should I create a separate custom control with separate dependency properties for each of the textblock strings? I'm interested in hearing what you would do.
thanks
Create a simple Style. To make it easy, I would base it off the standardized AppBarButton style. You can format it to whatever size you want (I have done something similar to make a larger button or one with text on the side).
Have the main icon simply be a ContentPresenter which binds to the Content using a TemplateBinding. Make sure to set the FontFamily to Segoe UI Symbol. Have the text label pull from AutomationProperties.Name, similar to how the AppBarButton style does.
Then, whenever you want to use this just do:
<Button Style="{StaticResource MyCustomButtonStyle}"
Content="" // Where "000" is replaced by the number of the icon you wish to use.
AutomationProperties.Name="Text Label"/>
This should be extensible and easily reproducible to whatever location you need. When copying over the AppBarButton style, I suggest removing the artificial size limits (specifically the width of the main content Grid). I do suggest either giving the Text Label a fixed size or having it pull its size from the specified parent Width, so that it will Wrap correctly.
Hope this helps and happy coding!
Are you desiring to create something like for an AppBar? Take a look at AppBarButton and the style/types it supports. In Windows 8.1 we added some things around SymbolIcon specifically. Since you basically want two pieces of 'content' for your style you'll have to re-purpose one property (unless you create a custom control which doesn't sound needed for this scenario). Using AutiomationProperties.Name for the visible label is a good idea because it will also help with accessibility by default for those users.
Investigate the style for AppBarButton to get you started.
A XAML StackPanel aligns controls side-by-side in a single direction. A WrapPanel is similar but like TextWrapping="Wrap" in a XAML TextBox the controls "wrap" to the next column or row when the respective height or width is reached.
Similar, but not the same, WrapGrid wraps content, but in a uniform grid. Though the VariableSizedWrapGrid allows for dissimilar items in the container. Neither of the WrapGrids can be used outside of an ItemsControl. So, they are disqualified.
When developers look in their native XAML Toolbox in Visual Studio there is no WrapPanel. WPF developers had a WrapPanel so they might be looking for this common tool to solve their scenario. So, I have to ask:
Does anyone know of a WrapPanel in XAML-WinRT? (what about one that is virtualized?)
There is one in WinRT XAML Toolkit here. It was ported from Silverlight Toolkit.
I had a same requirement and after googled it for a while, I've decided to use custom control for this. Please find following link for implementation:
http://www.codeproject.com/Articles/463860/WinRT-Custom-WrapPanel
Hope this will help you.
I have created a Windows 8 Store App using C# / XAML. My interface includes a scrollable list, which is rendered using an ScrollViewer. I would like to be able to handle manipulation events on the elements within the list, however, setting ManipulationMode to anything other than None on the list element causes my list to no longer scroll.
Here is a simplified version of the UI:
<ScrollViewer>
<Border/> <!-- these contain child content -->
<Border/>
<Border/>
<!-- Set ManipulationMode on an element in order to receive manipulation events -->
<!-- This causes the scroll viewer to stop working! -->
<Border ManipulationMode="All"
ManipulationDelta="..."/>
<Border/>
<Border/>
</ScrollViewer>
I understand that the WinRT ScrollViewer uses a special ManipulationMode of System for performance reasons, but I would like to have a vertically scrolling list, containing elements that respond to horizontal manipulation / gestures. Can anyone think of a creative workaround that would make this possible?
it may be long time but didn't find any good solution. I just achieved what I wanted very easily.
public MovableGrid()
{
ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.System;
AddHandler(ManipulationDeltaEvent, new ManipulationDeltaEventHandler(UIElement_OnManipulationDelta), true);
AddHandler(ManipulationCompletedEvent, new ManipulationCompletedEventHandler(UIElement_OnManipulationCompleted), true);
}
I wanted my MovableGrid to be moved on X axis and I have list of MovableGrids which I wanted to be scrolled with scrollviewer. That's enough to do that.
What I have done was I put a transparent rectangle on top of the ScrollViewer and handle manipulations there. When I find the manipulation should scroll the ScrollViewer - I scroll the ScrollViewer using the ScrollToHorizontal/VerticalOffset() methods. On ManipulationStarted I also use VisualTreeHelper.FindElementsInHostCoordinates to check which item I could manipulate too and then I can decide whether to manipulate that item or not depending on various conditions. It's quite a bit of custom code though. You would also need to update the RenderTransform of the ScrollContentPresenter in the ScrollViewer when the user tries to drag farther than minimum/maximum offset to immitate the ScrollViewer default behavior, handle mouse scrollwheel etc. Nothing YOU could not handle of course. I could not find a better way unfortunately and I am interested if someone finds one.
EDIT* Another solution I thought of when trying to answer another similar question was to use another ScrollViewer as a child item and use its ViewChanged events instead of manipulation events.
EDIT 2*
Also with Windows 8.1 you get ManipulationModes.System which combined with other modes should allow you to handle manipulations inside of a ScrollViewer. Then you can call CancelDirectManipulations() on the manipulated element once you want its parent ScrollViewers to stop processing manipulations for pan&zoom.
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.