How can I stop Android ScrollViewer to scroll itself to its first button child - xaml

I have a pretty simple page with a header, a footer, and scrollable content. My iOS and UWP app seems to work fine. When I enter the page iOS and UWP starts with the ScrollView Scrolled at the top, but Android seems to scroll down until you can see at least one button.
My page looks something like this (Header, big scrollable content and footer):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Height="64"
Background="Blue">
<TextBlock Text="Header"
Margin="20" />
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
<Grid Height="44"
Background="Green"
Grid.Row="2">
<TextBlock Text="Footer"
Margin="10" />
</Grid>
</Grid>

This arises from an interaction between the native Android scroll viewer (which is implicitly nested inside the Xaml ScrollViewer), which tries to scroll elements into view when they receive focus, and the Button, which takes focus when the Page first loads.
As a workaround to disable this behavior, you can use the BringIntoViewOnFocusChange property:
<ScrollViewer Grid.Row="1"
BringIntoViewOnFocusChange="False">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>

Related

Creating responsive element in XAML

I am absolutely new in UWP and its responsive design, so I need help.
Where's the problem?
e.g. I need 4 responsive buttons on landing page, but in each view it looks quite the same. So the button doesn't change, but looks same on desktop, and same on the phone emulator (or when I change screen resolution). For better description, there are some screens:
Buttons on large 23" screen - looks good, but...
..buttons on small 5" screen (portrait) - buttons are larger then canvas...
So my question is: How to make buttons responsive?
Here is my sourcecode:
<Page
x:Class="STCApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:STCApp"
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.RowDefinitions>
<RowDefinition Height="83*"/>
<RowDefinition Height="998*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="button" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Background="#33DCFF00"></Button>
<Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="1" Background="#33FF0000"/>
<Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="2" Background="#3300FF0C"/>
<Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="3" Background="#330080FF"/>
</Grid>
</Page>
For responsive design, we'd better avoid using fixed width and height. We can remove Width and Height setting in Button and set it's HorizontalAlignment and VerticalAlignment to Stretch like following to make the button responsive.
<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />
In this scenario, each button will occupy a cell in the grid and their width and height will change automatically according to the size of the gird. Following is a complete sample and for more info about the layout design, please see Layout for UWP apps.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="83*" />
<RowDefinition Height="998*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />
<Button x:Name="button_Copy" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33FF0000" Content="Button" />
<Button x:Name="button_Copy1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#3300FF0C" Content="Button" />
<Button x:Name="button_Copy2" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#330080FF" Content="Button" />
</Grid>
In this case it's better for you to use a RelativePanel which you can handle with Visual States that will change according to the available screen size. This might help
Windows 10 RelativePanel Sample

Windows Store Browse Button

I want to create a simple Browse button like that found on the Windows 8.1 Reader app:
However, after searching for an hour I'm still no wiser. There must be a standard Button style for circle buttons? And where would I find the browse icon?
Not sure this is the most elegant XAML in the world, but it gets the job done.
<Button Style="{StaticResource TextBlockButtonStyle}">
<Button.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</Button.RenderTransform>
<Grid>
<Rectangle Fill="DimGray" />
<Grid Margin="7,5,5,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="22" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="" FontFamily="Segoe UI Symbol" FontSize="18" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,-2,0,0" />
<TextBlock Grid.Column="0" Text="" FontFamily="Segoe UI Symbol" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Center" />
<TextBlock Grid.Column="1" Text="Browse" FontWeight="Light" Margin="4,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" />
</Grid>
</Grid>
</Button>
Here's the result:
Best of luck!
you should see this
AppBar button style images
Symbol enumeration
Modern UI
Icons

XAML Window Store Positioning of UI Element inside Datatemplate

I have created a Windows Store App with the default Hub Project, and on the first hubsection, I have an image as the background. I want to position some text at the bottom of the image to describe what the image is. However I am having trouble position the text inside the Hubsection.contenttemplate.
As you will be able to see from the code I have tried several things including trying to set the vertical alignment of both the grid and the individual text blocks, but neither seems to be working for me.
The code I currently have can be found below.
<HubSection Width="780">
<HubSection.Background>
<ImageBrush ImageSource="Assets/Images/example_meal.png" Stretch="UniformToFill" />
</HubSection.Background>
<HubSection.ContentTemplate>
<DataTemplate>
<Grid Margin="80,0,0,0" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Bottom" x:Name="pageTitle" Text="Primary Text" Style="{StaticResource TitleTextStyle}"
TextWrapping="NoWrap" FontSize="30" Margin="0,0,0,0" />
<TextBlock Grid.Row="1" FontWeight="Bold" Style="{StaticResource BodyTextBlockStyle}" Text="Secondary Text" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</HubSection.ContentTemplate>
</HubSection>

Windows Phone Context Menu Item Text Not Appearing

I have a Windows Phone 8 app using XAML/C#. My app has an ItemsControl that relies on a data template. My DataTemplate looks like the following:
<DataTemplate x:Key="myTemplate">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" TextTrimming="WordEllipsis" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="customerMenuItem" Foreground="White" Header="View Customer Profile" Click="customerMenuItem_Click" Tag="{Binding Path=CustomerName}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
<TextBlock Text="{Binding Summary}" TextWrapping="NoWrap" Grid.Row="1" Style="{StaticResource PhoneTextSmallStyle}" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Column="1"><!-- Stuff here --></StackPanel>
</Grid>
</DataTemplate>
This DataTemplate is referenced in the main part of my XAML as shown here:
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.ColumnSpan="2" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="myItemsControl" ItemTemplate="{StaticResource myTemplate}" ItemsSource="{Binding Customers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Please note, the "toolkit" namespace comes from clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit. When I hold my finger (or mouse) on the TextBlock, a context menu appears. However, I never see the words "View Customer Profile". I just see a block box that represents the context menu itself. I know that the item is there though. I know because the customerMenuItem_Click event successfully fires. I have a MessageBox in there that shows the value of the Tag. That value is always correct. For some reason though the menu item text is not appearing. What am I doing wrong?
You put Foreground = "White". Context menu is on white background. That is why you don't see your menu item.

Page.Frame.Navigate overlay old page

When I call Page.Frame.Navigate is i possible to navigate to a page smaller than screen size and make it lay over the page i just navigated from in any simple way? The ideal solution would not involve a large framework and the need to rewrite large parts of the application. I am looking for this effect: Windows 8 Music App
I guess I could make a hack by passing a snapshot of the page being navigated from to the new page and using this as a backdrop but I would prefer a cleaner solution. I guess I also could access the navigation stack from the new page and render the old behind.
You could use the Popup element, as William Melani stated. Here's an example:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="btnPopup" Content="Open Popup" Click="btnPopup_Click_1" Grid.Row="0"></Button>
<Popup IsLightDismissEnabled="True" x:Name="popup1" Grid.Row="1" HorizontalAlignment="Center">
<StackPanel Background="Black">
<Border Background="Blue" BorderThickness="2">
<StackPanel>
<StackPanel Orientation="Vertical" Margin="10">
<TextBlock Text="User:" VerticalAlignment="Center" Margin="0,0,10,0" FontSize="20" />
<TextBox Height="40" Width="250" FontSize="20" />
<TextBlock Text="Mail:" VerticalAlignment="Center" Margin="0,0,10,0" FontSize="20" />
<TextBox Height="40" Width="250" FontSize="20" />
</StackPanel>
<Button HorizontalAlignment="Right" Margin="10">Accept</Button>
</StackPanel>
</Border>
</StackPanel>
</Popup>
And the button event:
private void btnPopup_Click_1(object sender, RoutedEventArgs e)
{
popup1.IsOpen = true;
}
Design isn't really my thing.