I am learning Windows Phone 8.1 on my own. While designing I saw a piece of code somewhat like this in a website.
Can anyone explain to me why the attribute Height is given a value * instead of any numeric value in the following line??
<RowDefinition Height="*"></RowDefinition>
Full code is specified below:
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
It's called star sizing (see docs). It will distribute available space by weighted proportions.
For example:
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="20" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Red">
<TextBlock>I'm 50px tall</TextBlock>
</Border>
<Border Grid.Row="1" Background="Lime">
<TextBlock>I get 20% of the remaining space</TextBlock>
</Border>
<Border Grid.Row="2" Background="Cyan">
<TextBlock>I get 40% of the remaining space</TextBlock>
</Border>
<Border Grid.Row="3" Background="Yellow">
<TextBlock>I get 40% of the remaining space</TextBlock>
</Border>
</Grid>
Related
I would like to create the segmented control in the image below.
What i currently have or attempted using is the library in the following link : https://github.com/1iveowl/Plugin.SegmentedControl
How ever as you can see the final result ends up being a horizontal segmented UI, which is what I do not want.
I have checked the documentation of the plugin to see if there is a way of changing the orientation and it seems that is the current limitation of the plugin
<control:SegmentedControl
x:Name="SegmentedGenderControl"
TintColor="#F2EBF9"
SelectedTextColor="#6F1AC1"
TextColor="Black"
DisabledColor="White"
BorderColor="#6F1AC1"
BorderWidth="1.0"
FontSize="Medium"
Margin="8,8,8,8">
<control:SegmentedControl.Children >
<control:SegmentedControlOption Text="Male"/>
<control:SegmentedControlOption Text="Female"/>
<control:SegmentedControlOption Text="Female"/>
</control:SegmentedControl.Children>
</control:SegmentedControl>
The second alternative that I have thought about is using a grid with 3 rows :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
And then manually handle the selection based on the selection. Is there a simpler or plugin that is available to the public that is not the one above that I can use ?
So I finally managed to solve this problem as suggested by an external party through the use of a collection view
See the code that follows :
<CollectionView
HeightRequest="250"
x:Name="OptionsCollectionView"
ItemsSource="{Binding SelectionOptions}"
VerticalOptions="Start"
SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<yummy:PancakeView
x:Name="optionPancake"
Padding="20">
<yummy:PancakeView.Border>
<yummy:Border
Color="{StaticResource CollectionViewBorderColor}"
Thickness="2" />
</yummy:PancakeView.Border>
<StackLayout
Orientation="Horizontal">
<Label
x:Name="optionLabel"
Text="{Binding Option}"
FontSize="15"
FontFamily="EuclidCircularASemibold"
TextColor="{StaticResource SubHeadingColor}"
FontAttributes="Bold" />
</StackLayout>
</yummy:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The code that follows is for styling the visual state group, when an item is selected:
<Style TargetType="yummy:PancakeView">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState Name="Normal"/>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter
Property="BackgroundColor"
Value="{StaticResource FrameSelectedColor}"/>
<Setter
Property="yummy:PancakeView.Border"
Value="{yummy:BorderMarkup Color={StaticResource SelectedLabelColor}, Thickness='2'}"/>
<Setter TargetName="optionLabel"
Property="Label.TextColor"
Value="{StaticResource SelectedLabelColor}"/>
<Setter Property="CornerRadius"
Value="5"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
I have created a Style for my Buttons but when I use longer texts, they are truncated.
This is the style:
<Style x:Key="DefaultButton" TargetType="Button">
<!--<Setter Property="WidthRequest">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="150"
Tablet="200" />
</Setter.Value>
</Setter>
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="70"
Tablet="100" />
</Setter.Value>
</Setter>-->
<Setter Property="BackgroundColor" Value="{StaticResource BaseColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="Margin" Value="5" />
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="20"
Tablet="25" />
</Setter.Value>
</Setter>
</Style>
The button:
<Button Grid.Row="1"
Grid.Column="1"
Style="{DynamicResource DefaultButton}"
Text="Basic button with long text" />
This is how that button with a longer text looks:
I could set a very large HeightRequest for the button but that would be very bad practice.
What should I do about this?
In this situation I will often used a Grid with a BoxView and a Label to make up the button and then put a GestureRecognizer on the Grid. Add all of this to a custom control for easy reuse if you want.
I did the GestureRecognizer below from memory so it might need some fixing:
<Grid x:Name="BasicButtonGrid"
VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.MinimumHeightRequest>
<OnIdiom x:TypeArguments="x:Double"
Phone="40"
Tablet="70"/>
</Grid.MinimumHeightRequest>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="OnBasicButtonTapped"/>
</Grid.GestureRecognizers>
<BoxView BackgroundColor="Blue"
VerticalOptions="EndAndExpand"
InputTransparent="True"
Grid.Row="0"
Grid.Column="0"/>
<Label Text="Basic Button with long text"
TextColor="White"
FontSize="Medium"
Grid.Row="0"
Grid.Column="0"/>
</Grid>
You can use the LineBreakModeproperty. Here is the documentation to help you choose the most suitable mode.
https://developer.xamarin.com/api/type/Xamarin.Forms.LineBreakMode/
I'm wondering what is the best way to correcly scale a view in Windows 10 / Windows 8(.1) application.
ViewBox ?
VisualStateManager ?
Other ?
My picture are already suffixed by .scale-xxx.png
In 1366x768, I have :
And in WXGA, I have :
Here is my xaml code :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="2*" />
<RowDefinition Height="6*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<TextBlock Text="{x:Bind ViewModel.Player, Mode=OneWay}" Margin="20,0,0,0" VerticalAlignment="Center" />
<Image Grid.Row="0" Source="ms-appx:///Resources/Title/title-app.png" VerticalAlignment="Center" Stretch="None" HorizontalAlignment="Center" />
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right" Margin="10,5,25,5">
<Image Source="ms-appx:///Resources/Rating/star-full.png" Stretch="None" />
<TextBlock FontWeight="Bold" Margin="5,5,0,0" Text="{x:Bind ViewModel.Stars, Mode=OneWay}" FontSize="30" VerticalAlignment="Center" />
</StackPanel>
In my opinion it's the VisualStateManager because here you can find the
AdaptiveTrigger with MaxWindowWidth or MinWindowWidth. Then the diffrent VisulaStates will work perfectly.
For Example:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Width1250">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1310"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Button1.Visibility" Value="Visible"/>
<Setter Target="Button2.Visibility" Value="Visible"/>
<Setter Target="Button3.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
Hope to help you :)
As blueeyes said you can achieve this using visual states. If you don't want to change design you can simply use viewbox to fit the resolution (with stretching).
I have created Page where there is grid with three rows. In first row I have two button working as Toggle button. This button will visible or collapsed the content of the second and third row.
In second row I have form bigger than screen and in third row there ListView with Sticky and Grouped Style Header
Now the issue is that as the content in second grid row is more I have kept Page level scroll but when I put page level scroll than it will stop sticky header effect in ListView and when I remove page level scroll then ListView sticky header starts working properly but second row which have form bigger than screen will not scroll. So I was looking something that make my second row auto scroll.
Please somebody help to resolve it.
My XAML Code
<Page.Resources>
<Style TargetType="Button" x:Name="ToggleButtonStyle">
<Setter Property="Width" Value="195"/>
<Setter Property="FontFamily" Value="Copperplate Gothic Light"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="BorderBrush" Value="#0c3757"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="40">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
<TextBlock x:Name="ButtonTextElement" Foreground="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Text="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalAlignment}" TextAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBlock" x:Name="Label">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Margin" Value="6,6"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style TargetType="TextBox" x:Name="Text">
<Setter Property="Margin" Value="6,0"/>
<Setter Property="Background" Value="#e6e6e6"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
<Style TargetType="Button" x:Name="DropDownButton">
<Setter Property="Background" Value="#e6e6e6"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="{Binding Margin}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}" Height="35">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Stretch="None" Grid.Column="0" HorizontalAlignment="Left"/>
<TextBlock x:Name="ButtonTextElement"
Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" Grid.Column="1"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
<Image Source="{TemplateBinding local:BookAFlight.ImageSource}"
Stretch="Uniform" Grid.Column="2" HorizontalAlignment="Right"
Height="35"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--KAC Offices Style-->
<Style x:Key="RegionContainerStyle" TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<DataTemplate x:Key="RegionTemplate">
<Border Background="Red">
<TextBlock Foreground="White" FontSize="28"
Text="{Binding Name}"/>
</Border>
</DataTemplate>
<DataTemplate x:Name="CityTemplate">
<TextBlock Text="{Binding Name}" FontSize="24" MaxWidth="320" TextTrimming="WordEllipsis"
Foreground="Black"/>
</DataTemplate>
<model:GroupedModel x:Key="VM"/>
<CollectionViewSource x:Key="CVS" Source="{Binding Regions, Source={StaticResource VM}}"
IsSourceGrouped="True"
ItemsPath="Cities"/>
</Page.Resources>
<!--<ScrollViewer VerticalScrollBarVisibility="Auto">-->
<Grid x:Name="LayoutRoot" Background="#FFFFFF">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Content="$$Contact Us$$" x:Name="btnContactUs" x:Uid="ContactUs"
Style="{StaticResource ToggleButtonStyle}" Grid.Column="0" Foreground="White"
Margin="7,7,0,0" Click="ContactUs_Click" Background="#0c3757" />
<Button Content="$$KACOffices$$" x:Name="KACOffices" x:Uid="KACOffices" Foreground="Gray"
Style="{StaticResource ToggleButtonStyle}" Grid.Column="1"
Margin="0,7,7,0" Click="KACOffices_Click"/>
</Grid>
<Grid Grid.Row="1" x:Name="grdContactUs" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--<StackPanel x:Name="spContactUs" ScrollViewer.VerticalScrollMode="Auto">-->
<TextBlock x:Uid="FullName" Text="$$Full Name$$" Grid.Row="0"
Style="{StaticResource Label}"/>
<TextBox x:Name="FullName" Style="{StaticResource Text}" Grid.Row="1" KeyDown="FullName_KeyDown"/>
<TextBlock x:Uid="Company" Text="$$Company$$" Grid.Row="2"
Style="{StaticResource Label}"/>
<TextBox x:Name="Company" Style="{StaticResource Text}" Grid.Row="3" KeyDown="Company_KeyDown"/>
<TextBlock x:Uid="Telephone" Text="$$Telephone$$" Grid.Row="4"
Style="{StaticResource Label}"/>
<TextBox x:Name="Telephone" Style="{StaticResource Text}" Grid.Row="5" KeyDown="Telephone_KeyDown"/>
<TextBlock x:Uid="Email" Text="$$Email$$" Grid.Row="6"
Style="{StaticResource Label}"/>
<TextBox x:Name="Email" Style="{StaticResource Text}" Grid.Row="7" KeyDown="Email_KeyDown"/>
<TextBlock x:Uid="ContactArea" Text="$$Contact Area$$" Grid.Row="8"
Style="{StaticResource Label}"/>
<Grid Grid.Row="9" Height="35">
<Button Style="{StaticResource DropDownButton}" x:Name="ContactArea"
local:BookAFlight.ImageSource="/Assets/drop-down-icon.png" Margin="6,0">
<Button.Flyout>
<ListPickerFlyout x:Name="contactAreaListPicker" ItemsSource="{Binding ContactAreas}">
<ListPickerFlyout.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock>
<Run Text="{Binding contactArea}"/>
</TextBlock>
<Line X1="0" X2="480" Y1="0" Y2="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Bottom" StrokeThickness="1" Stroke="LightGray" />
</StackPanel>
</DataTemplate>
</ListPickerFlyout.ItemTemplate>
</ListPickerFlyout>
</Button.Flyout>
</Button>
</Grid>
<TextBlock x:Uid="Occupation" Text="$$Occupation$$" Grid.Row="10"
Style="{StaticResource Label}"/>
<TextBox x:Name="Occupation" Style="{StaticResource Text}" Grid.Row="11" KeyDown="Occupation_KeyDown"/>
<TextBlock x:Uid="Comments" Text="$$Comments$$" Grid.Row="12"
Style="{StaticResource Label}"/>
<TextBox x:Name="Comments" Style="{StaticResource Text}" Grid.Row="13"
AcceptsReturn="True" Height="80"/>
<Button x:Name="Submit" x:Uid="Submit" Background="#0c3757" Grid.Row="14"
Foreground="White" Content="$$Submit$$" Margin="25,0,25,0"
HorizontalAlignment="Stretch" Click="Submit_Click"/>
<!--</StackPanel>-->
</Grid>
<Grid Grid.Row="2" x:Name="grdKACOffices" Visibility="Collapsed">
<lv:DebugListView x:Name="TheListView"
ItemsSource="{Binding Source={StaticResource CVS}}"
ItemTemplate="{StaticResource CityTemplate}">
<ListView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource RegionTemplate}"
HeaderContainerStyle="{StaticResource RegionContainerStyle}"/>
</ListView.GroupStyle>
</lv:DebugListView>
</Grid>
</Grid>
<!--</ScrollViewer>-->
P.S. :- It is Silverlight windows phone 8.1 application
One simple solution would be to put the just Grid in your second row into a ScrollViewer.
It will work but the user experience would be really, having a page with two separate scrollable parts. I would suggest you split to page into two separate pages, one with the Grid from the second row and another with the ListView from the third row.
I'm trying to align an Ellipse with Uniform Stretch to the center (both vertical and horizontal). But when I add HorizontalAlignment="Center" and/or VerticalAlignment="Center" to the Ellipse, it becomes invisible.
This is my XAML code:
<Grid Grid.Row="1" Margin="12">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse x:Name="Ellipse_AccountImage" Grid.Row="0" Grid.Column="0" Stretch="Uniform">
<Ellipse.Fill>
<ImageBrush x:Name="ImageBrush_AccountImage"/>
</Ellipse.Fill>
</Ellipse>
<Grid x:Name="Grid_AccountInfo">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Name:" Margin="0,0,12,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Name"/>
<TextBlock Grid.Row="1" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Email:" Margin="0,0,12,0"/>
<TextBlock Grid.Row="1" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Email"/>
<TextBlock Grid.Row="2" Grid.Column="0" Style="{ThemeResource BaseTextBlockStyle}" Text="Created:" Margin="0,0,12,0"/>
<TextBlock Grid.Row="2" Grid.Column="1" Style="{ThemeResource BodyTextBlockStyle}" x:Name="TextBlock_Created"/>
</Grid>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Ellipse_AccountImage.(Grid.RowSpan)" Value="2"/>
<Setter Target="Ellipse_AccountImage.Margin" Value="0,0,24,0"/>
<Setter Target="Grid_AccountInfo.(Grid.Row)" Value="0"/>
<Setter Target="Grid_AccountInfo.(Grid.Column)" Value="1"/>
<Setter Target="Grid_AccountInfo.(Grid.RowSpan)" Value="2"/>
<Setter Target="Grid_AccountInfo.VerticalAlignment" Value="Center"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Ellipse_AccountImage.(Grid.ColumnSpan)" Value="2"/>
<Setter Target="Ellipse_AccountImage.Margin" Value="0,0,0,24"/>
<Setter Target="Grid_AccountInfo.(Grid.Row)" Value="1"/>
<Setter Target="Grid_AccountInfo.(Grid.Column)" Value="0"/>
<Setter Target="Grid_AccountInfo.(Grid.ColumnSpan)" Value="2"/>
<Setter Target="Grid_AccountInfo.HorizontalAlignment" Value="Center"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I already tried putting the Ellipse element in a ViewBox, Canvas or Grid but that doesn't solve the problem.
From the comments above it seemed that it isn't possible to solve this with XAML only. Instead I wrote a function that updates the width and height manually every time the page is resized (like igrali said). Thank your for the help!