What I'm trying to do was extremely easy in SL/WP 8 but seems to be impossible in WP 8.1 without redefining the Hub template myself. I want to create a hub with a header that:
Scrolls horizontally.
Has a background that scrolls along with it.
Has no margins on either side.
I know this can probably be solved by just having my background image include the background and the hub just being transparent, but I wanted to know if there was a way to solve it in XAML.
Putting a Grid with a background into the Hub's header just highlights the background as much as the hub needs--not stretching all the way across:
<Hub>
<Hub.Header>
<Grid Background="Red" Height="60">
<TextBlock Text="My Header" />
</Grid>
</Hub.Header>
</Hub>
The above makes the header with the text "My Header" but only the text part has a background. Furthermore, the Hub itself seems to have inner margins of 16 on each side so the background doesn't stretch across the whole phone screen.
Should I just be going with a background or deconstructing the template to remove the margins?
Far from an elegant solution but basically I put the background outside the Hub and gave it negative margins like so. Hacky but I guess it works.
<Grid>
<!-- This is the header bar -->
<Grid Height="64" Background="Red" />
<Hub>
<Hub.Header>
<StackPanel Margin="-6,0,0,0">
...
</StackPanel>
</Hub.Header>
<!-- actually just defined the margin in my ResourceDictionary to target all HubSections -->
<HubSection Header="section 1" Margin="-2,-20,-4,8" />
<HubSection Header="section 2" Margin="-2,-20,-4,8" />
</Hub>
</Grid>
Related
Background
I am developing a UWP app, which is being designed for mobile, desktop etc.
I am having a bit of difficulty with the CommandBar on certain pages - specifically on a phone (but this may also apply to a smaller desktop window).
Issue
Where I require quite a few AppBarButtons on the CommandBar, sometimes it overflows and I am unable to see/access the hidden buttons.
Here is a sample screenshot where you can see that the "Documents" label is being cut off. There is also another button (which cannot be seen/accessed) which I guess you would say is "underneath" the ... button:
XAML
Shortened for brevity (nothing special/out of the ordinary here)
<CommandBar>
<!-- Secondary Commands -->
<CommandBar.SecondaryCommands>
<AppBarButton Command="{Binding RefreshCommand}"
Icon="Refresh" Label="Refresh"/>
<AppBarButton Command="{Binding AddToLibraryCommand}"
Icon="Save" Label="Add to Library"/>
</CommandBar.SecondaryCommands>
<!-- Primary Commands -->
<CommandBar.PrimaryCommands>
<AppBarButton Command="{Binding CompleteFormCommand}"
Icon="Paste" Label="Complete a Form" />
<AppBarSeparator />
<AppBarButton Command="{Binding ViewPeopleCommand}"
Icon="People" Label="People" />
<AppBarButton Command="{Binding ViewPropertiesCommand}"
Icon="Home" Label="Properties" />
<AppBarButton Command="{Binding ViewDocumentsCommand}"
Icon="Folder" Label="Documents" />
<AppBarSeparator />
<AppBarButton Command="{Binding ViewMapCommand}"
Icon="Map" Label="Map" />
</CommandBar.PrimaryCommands>
</CommandBar>
What I need
I still need the other AppBarButtons to be accessible by the user.
The amount of buttons on each CommandBar can vary - sometimes they fit fine, some have 1 (like the example) hidden, others have 2 or 3 hidden.
I am thinking that (surely, somehow) it might be possible somehow to allow horizontal scrolling in order to access the other buttons?
What I have tried
I have resorted to moving some of the non-essential commands to the CommandBar.SecondaryCommands, to free up some space; as can be seen in the screenshot/XAML above - however, the main problem is still apparent.
There is no ScrollViewer attached property, and trying to nest the AppBarButtons inside one naturally throws me a compiler error:
Invalid type: expected types are IObservableVector<ICommandBarElement> or ICommandBarElement, actual type is ScrollViewer.
I have searched the Web far and wide for answers to see if it is possible, and it doesn't appear there is much literature (or any similar StackOverflow answers) on how I can go about solving this issue.
All advice is greatly appreciated. Thank you in advance.
As for me, it is not pretty good UX behavior, but you can override Style for CommandBar and wrap primary ItemsControl into ScrollViewer.
Find the default style and find the PrimaryItemsControl and replace to:
<ScrollViewer VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Disabled"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible">
<ItemsControl x:Name="PrimaryItemsControl"
HorizontalAlignment="Right"
MinHeight="{ThemeResource AppBarThemeMinHeight}"
IsTabStop="False"
Grid.Column="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
After that don't forget apply new style for CommandBar:
<CommandBar Style="{StaticResource ScrollablePrimaryComamndCommandBar}">
P.S. full xaml on pastebin
In my Windows 10 UWP app there is a view, where a MapControl is partially (at the top) covered by a Grid. This Grid has cockpit-like elements in it (e.g. speedometer) and has a semi-transparent background-brush (#CC6A6E4D).
The actual problem is, that this background-brush is flickering, whenever one is interacting with the MapControl. Weird thing about this is, that this issue exclusively works on just one of my three test devices (Lumia 550) and only is present in portrait-mode (but not in landscape-mode).
An example-layout, where I've got that issue would be this:
<Grid>
<maps:MapControl
Name="MainMapControl"/>
<Grid
Height="50"
VerticalAlignment="Top">
<Grid.Background>
<SolidColorBrush Color="#CC6A6E4D" />
</Grid.Background>
</Grid>
</Grid>
Any ideas?
When I have a page with an CommandBar set on Page.TopAppBar (and that page in an inner page on another page), the UI element appears at the top of the window (which is what I expected and want).
However, the page on the inner page gets "space" taken out of it - as if the CommandBar is actually on it.
I tried a couple of things, the only thing that kind'a works is playing with margins, but even that seems to have weird artifacts (and anyway is not how I want to solve this).
Here's the XAML for the outer page:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="100" BorderBrush="Pink" BorderThickness="3">
<Frame x:Name="frame" />
</Border>
</Grid>
And here's the XAML form the inner page:
<Page.TopAppBar>
<CommandBar>
</CommandBar>
</Page.TopAppBar>
<Grid Background="Black">
</Grid>
Here's what the UI looks like - as you can see, the inner page has a bunch of space "taken" out as if the appbar is actually located on it.:
Remove container, just put CommandBar inside your Page in inner Frame. Put CommandBar in the bottom to make sure it overlays other element in the inner Page.
Final code should look like:
<Grid Background="Black">
<!-- Content here -->
<CommandBar>
</CommandBar>
</Grid>
In my app I have a list box that contains a stack panel with text block items. The text block items have a text wrapping or text trimming property to avoid that the text block items slide outside the visible range.
As far as I know the text wrapping and text trimming property need a fixed width to insert a line break. For this reason, I set a fixed width for the title (Width="456") and for the description (Width="432"):
<ListBox x:Name="CategoryList" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<StackPanel>
<TextBlock
Style="{StaticResource PhoneTextLargeStyle}"
Text="{Binding Name}"
TextTrimming="WordEllipsis"
Width="456"
/>
<TextBlock
Style="{StaticResource PhoneTextSubtleStyle}"
Margin="12,-6,12,0"
Text="{Binding ContentDescription}"
TextWrapping="Wrap"
Width="432"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The problem now is that when I turn the phone, the fixed width for the horizontal mode is too small. Is there a way to put in place of the fixed width a width depending on the device width?
Screenshot:
in general its never a good idea in XAML to use fixed width/height (for "whole" page(100%)) since XAML was designed to do this job for you, so you might concentrate on your layout and the technology covers the aspect of different screens and sizes.
So, if you use a fixed width to display sth. on the whole page its a very good indicator that something is wrong.
In your case you've got the use of StackPanels wrong. StackPanels are designed in a way, that their size is not limited in the direction of their orientation. This means, a StackPanel that has got its orientation set to horizontal might grow indefinetely in width and a sp with orientation set to vertical wouldn't be limited in its height.
Now this leads us to your problem: you have used an indefintely-in-width-growing element in an indefinetely-in-height-growing element (two stackpanels).
Even though you might by some tricks limit their size (e.g. that could be achieved by some data bindings), this isn't what should be done.
I'd say - since in the parent StackPanel nothing is stacking - substitute it with some other panel/container (or just remove it) and your problem will be gone.
Example
<DataTemplate>
<!-- If you need more child elements uncomment the following line -->
<!-- <Grid> -->
<StackPanel Margin="0,0,0,17">
<TextBlock ... />
<!-- no need to set width on the following textblock -->
<TextBlock ... TextWrapping="Wrap" />
</StackPanel>
<!-- </Grid> -->
</DataTemplate>
So I have a grid with a background. Inside the grid is a WebView and then some space on the left hand side of the screen where I have just placed a Button for now.
As the program runs, the left hand bar (that shows the grid with the background and the button laid out on it) doesn't render, instead I get the background, no controls on it and a black triangle (or geometric shape) at the bottom.
I suspect it's an issue with the VM and the video driver. I had a similiar issue with WPF a few years ago and MS's response was that I had an incompatible video driver that was causing the form to not render correctly at all times (this is very much the same behavior).
What can I do to prevent this? I'm including an image.
I'm going to include the small XAML I used and then a screenshot of the behavior (The XAML I rekeyed by hand):
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Media/Background.jpg" />
</Grid.Background>
<TextBlock FontSize="24" Margin="15,15,0,0">Sample Label</TextBlock>
<WebView x:Name="wv1" Margin="250,0,0,0"></WebView>
<Button Content="Do Something" HorizontalAlignment="Left" Height="42" Margin="57,131,0,0" VerticalAlignment="Top" Width="170" Click="Button_Click1" />
</Grid>
VMs don't work well with multimedia. You should expect all sorts of problems with video.