Develop Reference

How to have the scrollview affect the inner frame only, not whole app

In writing a XAML/UWP/C# app I have the MainPage.xaml, which contains a header menu (home|back|forward navigation and user display buttons), and page navigation menu (left side) split panel, other side of the split is a frame for displaying the pages.
Following is a simplified version of the code (Note that nowhere in this code is a ScrollView):
<Page
x:Class="PowderTracks.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PowderTracks"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="1200"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView Height="Auto">
<StackPanel
Width="Auto">
<StackPanel x:Name="headerMenu"
Orientation="Horizontal"
Background="#FF016B3B"
Width="Auto"
Padding="0,0,0,0" >
<Button x:Name ="HomeButton"
Foreground="#FFC0FFC0"
Margin="10,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Home.png" Width="64" />
</Button>
<Button x:Name ="BackButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Back.png" Width="64" />
</Button>
<Button x:Name ="ForwardButton"
Foreground="#FFC0FFC0"
Padding="0,0,0,0"
Background="#33016B3B">
<Image Source="Assets\Forward.png" Width="64" />
</Button>
<Button x:Name="btnFace" Background="#33016B3B">
<Image x:Name="userPic" Width="32" Height="32"/>
<Button.Flyout>
<Flyout>
<StackPanel>
<Image x:Name="foPic" Width="96" Height="96"/>
<TextBlock Name="foDisplayName" />
<TextBlock Name="foEmail" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<TextBlock Name="lblUsername"
x:FieldModifier="public"
Text=""
Margin="10,0,0,0"
Height="25"
FontSize="18"
VerticalAlignment="Center"
Foreground="#FFC0FFC0"
/>
<ToggleSwitch x:Name="btnDatabase"
Margin="50,0,0,0"
OffContent="TestDB"
OnContent="LiveDB"
HorizontalAlignment="Right"
Visibility="Visible"
/>
</StackPanel>
<SplitView x:Name="svFrame"
IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="80" Height="Auto" Width="1024">
<UIElement.RenderTransform>
<MatrixTransform/>
</UIElement.RenderTransform>
<SplitView.Pane>
<StackPanel>
<Button Name="btnTracker"
Width="80"
Height="65"
Padding="0,0,0,0">
<Image Source="Assets\trackers.png"
Width="64"/>
</Button>
<Button Name="btnTasks"
Width="80">
<Image Source="Assets\tasksIcon.png"
Width="64"/>
</Button>
<Button Name="btnRFP"
Width="80">
<Image Source="Assets\proposals.png"
Width="64"/>
</Button>
<Button Name="btnFM"
Width="80">
<Image Source="Assets\folderMachine.png" Width="64"/>
</Button>
<Button Name="btnClients"
Width="80" >
<Image Source="Assets\clients.png"
Width="64"/>
</Button>
<Button Name="btnMaint"
Width="80"
Padding="0,0,0,0">
<Image Source="Assets\maintenance.png"
Width="64"
Margin="0,0,0,0"/>
</Button>
</StackPanel>
</SplitView.Pane>
<Frame x:Name="content"
Padding="10,10,10,15"
HorizontalAlignment="Left"
Width="Auto"
Height="Auto"
VerticalAlignment="Top"/>
</SplitView>
</StackPanel>
</GridView>
</Page>
(Click events were removed to make it just copy/paste.)
Anyway, the first opening page is the Proposals page (because this is the one I've been working on), and it is a long page with many controls. I want the scroll view to move the Proposals (or whatever pages come after) page without moving the header menu or the left-side navigation menu. Right now if I scroll the entire app scrolls, so the header and navigation menus scroll up as the page scrolls.
What I have tried:
Placing the ScrollView on the <Frame x:Name...> panel - does not work.
Placing the ScrollView on the Proposals Page in the top level StackPanel
<StackPanel Margin="0,0,10,27"
VerticalAlignment="Top"
ScrollViewer.VerticalScrollBarVisibility="Visible">
Doesn't work.
I've tried to follow the example on these sites:
https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.scrollviewer?view=winrt-18362
https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/scroll-controls
Thank you in advance.

GridView is usually used together with ItemTemplate and ItemsSource. This control is to quickly generate a batch of items with the same layout (such as the Windows Settings home page) based on the data set, rather than being used as a layout container. Here is the related document
GridView is a combination of multiple controls. The reason why your application scrolls is because the GridView contains a ScrollViewer.
Based on the code you provided, you can try this layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<StackPanel>
<!-- Header Buttons -->
</StackPanel>
<SplitView Grid.Row="1">
<SplitView.Pane>
<!-- Pane List -->
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer>
<Frame x:Name="content"/>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</Grid>
This ensures that only the content inside the Frame will scroll.
Thanks.

My guess would be to do this:
<ScrollViewer Padding="10,10,10,15"
HorizontalAlignment="Stretch"
Width="Auto"
Height="Auto"
VerticalAlignment="Stretch">
<Frame x:Name="content" />
</ScrollViewer>
Important thing to remember is that ScrollViewer size needs to constrained - ScrollViewer itself cannot grow when content grows, because then it will not be able to properly generate the scroll bars

Fix a ComboBox to an Image

I'm using an Image with a ComboBox in my C# WPF application.
I want the ComboBox fixed in top/right corner of Image (not the grid containing both). Actually these two elements are in a grid.
It's hard for me to clearly explain what I want, there is pictures to help me.
What I want:
What I have:
How can I write my ComboxBox to achive this ?
<Grid>
<Image HorizontalAlignment="Stretch" x:Name="VideoControl" FlowDirection="LeftToRight"/>
<ComboBox Grid.Row="1" x:Name="ListCameraDevices" Style="{StaticResource {x:Static ToolBar.ComboBoxStyleKey}}"
HorizontalAlignment="Right" VerticalAlignment="Top"
Width="auto"
Background="Transparent" BorderBrush="Transparent" Foreground="White"
BorderThickness="0"/>
</Grid>

Gaaty's answer is mostly right but the column definitions are not needed. You simply need to ensure the Image has it's Stretch property set to 'Uniform' so that it sizes the inner grid correctly.
Here's a simplified version:
<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="https://a2ua.com/awesome/awesome-004.jpg" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<ComboBox HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" BorderBrush="Transparent" Foreground="White" BorderThickness="0"/>
</Grid>
</Grid>

you could try adding the Image and ComboBox inside their own grid (Inside the other Grid), and have them overlap in the same Grid Column set out by the ColumnDefinition.
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumDefinitions>
<Image Grid.Column="0" Grid.ColumSpan="2" HorizontalAlignment="Stretch" x:Name="VideoControl" FlowDirection="LeftToRight"/>
<ComboBox Grid.Column="1" Grid.Row="1" x:Name="ListCameraDevices" Style="{StaticResource {x:Static ToolBar.ComboBoxStyleKey}}"
HorizontalAlignment="Right" VerticalAlignment="Top"
Width="auto"
Background="Transparent" BorderBrush="Transparent" Foreground="White"
BorderThickness="0"/>
</Grid>
</Grid>
Or maybe just putting them inside their own Grid still, and just setting the ZIndex of the ComboBox to appear ontop.
[EDIT]:
Created a test project, does pretty much what you want to accomplish.

Windows 8.1 Universal app - Design UI

I am sorry for my bad English.
I want to make a program for windows 8.1 universal. I have a question about design UI. I have a menu in top of my app for choose one option to see full information at the bottom of page. I want to make page that work for all different page size and resolutions. When person change the size of app windows, the top menu must changed like here. (for example when person decrease size of page):
Please save image because It's gif with animation.
I try to use viewbox but viewbox make the button in top menu smaller so button's boarder is changed. (or maybe I don't know how to do it)
It's my code But It doesn't work like my example:
<Viewbox>
<StackPanel Orientation="Horizontal">
<StackPanel x:Name="StackConnectionInfor" Orientation="Horizontal" Margin="10,0,30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandInformation.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Information</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionReport" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandReport.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Reports</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionChart" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandChart.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Chart</TextBlock>
</StackPanel>
</StackPanel>
</Viewbox>
Is it possible to help me?
Thanks.

You can use Grid as a container and define 4 columns:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

Panel on Control Focus

I am working on a multi-lingual WPF app. The user must provide input for multiple languages at same time. This works but it also moves fields below it.
What I am looking for is somewhat like this:
What I have done so far is below:
<Label Grid.Column="0" Grid.Row="0" Content="Field1" Padding="0" Style="{DynamicResource ControlLabel}"/>
<Label Grid.Column="1" Grid.Row="0" Content=":" Style="{DynamicResource ControlLabelMiddle}"/>
<StackPanel Grid.Column="2" Grid.Row="0" Margin="3" Style="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<TextBox x:Name="txtField1" Height="23" GotKeyboardFocus="txtField1_GotKeyboardFocus" />
<Grid Background="White" x:Name="pnlField1" Visibility="Collapsed" Panel.ZIndex="99">
<Border BorderBrush="blue" BorderThickness="3">
<StackPanel Background="White" Margin="5">
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Label Content="Language2" HorizontalAlignment="Left"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="10" Padding="2" >
<Hyperlink Hyperlink.Click="btnClose_Click" x:Name="btnClose" >X</Hyperlink>
</TextBlock>
</StackPanel>
<TextBox x:Name="txtField_Second" Height="23" Width="280" />
</StackPanel>
</Border>
</Grid>
</StackPanel>
When the above control gets focus, my second language panel comes up. But it moves my next row controls down and doesn't look good.

To keep the panels from moving, try placing them in a Grid, rather than a StackPanel. This enables you to specifically define where each element is placed in the Grid. In a StackPanel, elements "stack" on top of each other. As contents of the panels change, the amount of space each element takes up in the "stack" also has the potential to change.

Windows Phone SDK - XAML - automatic margin for the top margin

I have the following XAML in my Windows Phone app:
<StackPanel Orientation="Horizontal">
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" Margin="150,20,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" Margin="150,150,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Width="300" />
</Grid>
</StackPanel>
Currently, I have the margin of the second TextBlock (DescriptionBlock) set to a static value. Now because I have the work wrapping of the first TextBlock (NameBlock) set to "Wrap", the height of the TextBlock is variable.
Does anyone know how to make the top-margin of DescriptionBlock equal to the automatic height of NameBlock? This would ensure that the second DescriptionBlock appears directly below the NameBlock, regardless of the length of the text of NameBlock.
Many thanks!
Brett

This is what panels are for. Wrap the two text blocks in stack panel and it will stack the text blocks one above the other.
<Grid x:Name="LayoutRoot">
<Image Source="{Binding ImageUrl}" Height="80" HorizontalAlignment="Left" Margin="10,10,0,0" Stretch="Fill" VerticalAlignment="Top" Width="93" />
<StackPanel Margin="150,20,0,0" Width="300">
<TextBlock name="NameBlock" Text="{Binding Name}" FontSize="30" TextWrapping="Wrap" HorizontalAlignment="Left" />
<TextBlock name="DescriptionBlock" Text="{Binding Description}" FontSize="25" TextWrapping="Wrap" HorizontalAlignment="Left" />
</StackPanel>
</Grid>
A panel that holds a single child is usually useless, so I removed the stack panel around the grid.
If you'd like to continue using Grid you can define rows for it to size automatically.