Prevent Page Expanding Frame in Windows 8 XAML App within ScrollView - xaml

I'm creating a basic application to test some functionality in a XAML based Windows 8 app.
I have created the following structure to simplify my example but in the real app it'll be more complex:
<Page
x:Name="pageRoot"
x:Class="ScrollingTest.Xaml.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScrollingTest.Xaml"
xmlns:common="using:ScrollingTest.Xaml.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden" Margin="0,0,0,10" VerticalContentAlignment="Stretch" BorderBrush="#FF0BC8FF" BorderThickness="1" Grid.Row="1" >
<Frame Content="Frame" Name="theFrame" Margin="100" Width="3000" BorderBrush="Red" BorderThickness="1"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
</Grid>
</Page>
The page, which is loaded into the Frame is of variable height (it contains a listview).
The issue is that as the height of the sub-page increases, so does the height of the ScrollViewer, meaning that the content is forced off the bottom of the screen.
What I'd want to achieve is horizontal scrolling for the parent but then use vertical scrolling on the sub-page. In the real application there will be many sub-pages, probably within a grid.
It seems that putting the frame inside a ScrollViewer breaks the frame's internal scrolling capabilities.
If anyone could let me know of either a better way to achieve my end result or of some property I need to change then I'd be very grateful.

I ended up using the solution from the following comment:
XAML: Limiting size of control nested in ScrollViewer (to scroll nested within the ScrollViewer)
Height="{Binding ElementName=scrollViewer, Path=ActualHeight}"
Not really what I wanted as this doesn't cope automatically when changing the orientation but it will have to do.
The other option is to handle the SizeChanged event of the page and update the height from the event handler (theFrame.Height = scrollViewer.ActualHeight). That way it copes with changing the orientation as well.

Related

How to resize NavigationView and SplitView in UWP

I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.

XAML: ImageBrush horizontal tiled

I've searched accross the Internet to solve the follow problem, but unfortunately I didn't found any working solution.
My goal is to have an ImageBrush with an image x-repeating at the bottom of the object which is using the brush. Additional the brush shall have a transparent margin, so the repeated Images shall not "touch" the container's border.
Currently I'm able to repeat an image x- and y-axis (and there I'm stuck ...). That for I use the following XAML:
<ImageBrush
x:Key="MandatoryIndicator"
ImageSource="image.png"
Stretch="None"
TileMode="Tile"
ViewportUnits="Absolute"
Viewport="0,0,16,16"
AlignmentY="Bottom"/>
And it Looks like this:
And I like to have it like this:
If you know how I have to modify my brush XAML, that would be great c[~] =)
You may use a VisualBrush with two nested elements like shown below. The outer Border (or some other outer element) is necessary for the transparent margin.
<VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Bottom">
<VisualBrush.Visual>
<Border Background="Transparent"
Width="{Binding ActualWidth,
RelativeSource={RelativeSource AncestorType=FrameworkElement}}">
<Rectangle Margin="10" Height="16">
<Rectangle.Fill>
<ImageBrush ImageSource="image.png" TileMode="Tile"
Viewport="0,0,16,16" ViewportUnits="Absolute"/>
</Rectangle.Fill>
</Rectangle>
</Border>
</VisualBrush.Visual>
</VisualBrush>

How to show ProgressRing in UWP app with Hub control

I have a UWP app that needs to get SQL data from a webservice hosted on a .Net server in the cloud as well as some extra data from a web API and I want to show an indeterminate Progress Ring control while it's loading.
I have the control bound to a boolean in my MainViewModel that I set to true at the start of the whole update process (done via an awaited async method which works perfectly) and then to false when all data is downloaded but the ring just never becomes visible. I can see PropertyChanged is getting raised but it makes no difference - the progress ring just never displays.
Here's the thing though - the progress ring IS working, but because I can't get it to display in front of my Hub control it just appears not to be working. I know this because if I move the Hub down 100 pixels and set the vertical alignment of the progress ring to Top I can then see the ring and it behaves exactly as expected. But as I obviously don't want to waste 100 pixels I need to get it to display at the front of all content as you'd expect any progress control to do.
I have also tried putting the ring in the grid of the data template's grid for the middle hub section (there are 3 side by side at 640px each) and in the DataTmeplate itself (the second one in Page.Resources below) but it still won't display it so I am tearing my hair out.
I know this has got to be the simplest XAML issue but I've tried everything I can think of and searched the web so I'm hoping someone else can help me get the progess ring to display in front of the Hub?
Here's a cut down version of my XAML page - I can post the lot but it's a big page.
<Page
x:Class="TVTracker.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TVTracker"
xmlns:vm="using:TVTracker.ViewModel"
xmlns:model="using:TVTracker.Model"
xmlns:hlp="using:TVTracker.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="Light">
<Page.DataContext>
<vm:MainViewModel/>
</Page.DataContext>
<Page.Resources>
<!-- styles and other resources here -->
<!-- gets displayed in first of 3 hub sections 640 wide -->
<DataTemplate x:Key="ShowListTemplate" x:DataType="model:TVShow">
<Grid Width="640" Height="Auto" Margin="5" HorizontalAlignment="Stretch" RightTapped="ShowsList_RightTapped">
<!-- ...etc etc... -->
<\DataTemplate>
<!-- gets displayed in second of 3 hub sections 640 wide -->
<DataTemplate x:Key="DetailsTemplate" x:DataType="model:TVShow">
<Grid Width="640" Margin="0,20,0,0" Height="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<!-- ...etc etc... -->
</Grid>
</DataTemplate>
<!-- gets displayed in second of 3 hub sections 640 wide -->
<DataTemplate x:Key="EpisodeListTemplate" x:DataType="model:Episode">
<Grid Width="640" Margin="0,20,0,0" Height="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<!-- ...etc etc... -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ProgressRing Name="pgbLoadingShow" IsActive="{Binding LoadingShowData}" Width="100" Height="100" VerticalAlignment="top" Foreground="{StaticResource Medium}"/>
<Hub SectionHeaderClick="Hub_SectionHeaderClick" Margin="0,0,0,0" HorizontalContentAlignment="Stretch" Background="{StaticResource Dark}">
<Hub.Header>
<TextBlock Text="ShowTracker" FontSize="14" Foreground="{StaticResource Bright}"/>
</Hub.Header>
<HubSection Name="hsShows" MinWidth="640" Padding="20" VerticalAlignment="Top" Background="{StaticResource Dark}" >
<!-- ...etc etc.. -->
</HubSection>
<!-- two other hubsections here -->
</Hub>
</Grid>
</Page>
Have you tried putting the ProgressRing after the Hub in your XAML?
<Hub/>
<ProgressRing/>
Generally it will be displayed in the order which you put them in, so the ProgressRing element will be behind the Hub with your code.

Disabling snap points/bounce back on ScrollViewer in XAML

I have a Grid with an Image inside a ScrollViewer. The user needs to be able to zoom in and out of the image. The problem is when I zoom the scrollviewer seems to snap back to the left side of the image although I want the viewer to stay at the zoomed position. The XAML code looks like this
<ScrollViewer Name="ScrollViewer" HorizontalSnapPointsType="None" VerticalSnapPointsType="None" ZoomSnapPointsType="None">
<Grid x:Name="RenderedGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image x:Name="RenderedImage" Stretch="Fill" />
<canvas:CanvasControl Name="DrawingCanvas" Draw="CanvasControl_Draw" ClearColor="Transparent"/>
</Grid>
</ScrollViewer>
I thought it would be enough with setting the SnapPointType to "None", but that doesn't seem to work.
I wrote a blog post exactly about this issue: Why is my zoomable ScrollViewer snapping the image to the left?
The first part of the problem is the ScrollViewer itself, it needs the HorizontalScrollBarVisibility and VerticalScrollBarVisibility set to Auto.
<ScrollViewer ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="4"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
For that to really work, you'll need to limit the Image size to some width/height, like this:
<Image Source="{Binding ImageUri}"
MaxWidth="{Binding DataContext.PageWidth, ElementName=MyPage}"
MaxHeight="{Binding DataContext.PageHeight, ElementName=MyPage}"/>
You can find more details in my blog post, and full source code on GitHub.

How to remove EntranceThemeTransition from a single object in a Windows 8 App?

It seems like every object that has been added to a page in a Windows 8 App gets this "slide from right to left"-entrance-transition which begins whenever someone navigates to the page.
Is there a possibility to remove single objects from this transition?
Neither
<Object.Transitions>
<TransitionCollection />
</Object.Transitions>
nor this thread helped...
Any ideas?
AFAIK There's no way to exempt a given object from the transitions applied by it's parents. The only thing I can suggest is to structure your xaml in such a way that the transition isn't applied. By this I mean having this special item in a panel that has no children transitions while the rest of the page is in a panel with a child transition. Depending on where this item is it could be very easy or difficult as hell.
As Nigel suggested, the only solution I have found has been to change the page structure and put the elements out of the grid that has the animations:
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Transitions>
<TransitionCollection/>
<!-- Ensure no transitions in background -->
</Grid.Transitions>
<TextBlock FontSize="50" Margin="50">This item is not animated</TextBlock>
<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<!-- add transitions here -->
<EntranceThemeTransition FromVerticalOffset="1500" FromHorizontalOffset="1500"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<TextBlock Margin="50,100" FontSize="50">This item is animated</TextBlock>
</Grid>
<TextBlock FontSize="50" Margin="50,150">Another not animated item</TextBlock>
</Grid>
</Page>