I am trying to add a commandbar to the MasterDetailsView, but I cannot figure out how to add the control using straight XAML.
Here's my code:
<CommandBar Grid.Row="0" Name="CommandBar" >
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Forward" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<TextBlock Text="Now playing..." Margin="12,14"/>
</CommandBar.Content>
</CommandBar>
<controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent" />
You can set the CommandBar like such:
<controls:MasterDetailsView MasterCommandBar="{x:Bind CommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent">
<controls:MasterDetailsView.MasterCommandBar>
<CommandBar>
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
</CommandBar>
</controls:MasterDetailsView.MasterCommandBar>
</controls:MasterDetailsView>
You should also be able to put the CommandBar into your page resources and apply using the resource
<Page.Resources>
<CommandBar x:Key="MasterCommandBar" >
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" />
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" />
<AppBarButton Icon="Stop" Label="Stop" />
<AppBarButton Icon="Play" Label="Play" />
<AppBarButton Icon="Forward" Label="Forward" />
<CommandBar.SecondaryCommands>
<AppBarButton Icon="Like" Label="Like" />
<AppBarButton Icon="Dislike" Label="Dislike" />
</CommandBar.SecondaryCommands>
<CommandBar.Content>
<TextBlock Text="Now playing..." Margin="12,14"/>
</CommandBar.Content>
</CommandBar>
</Page.Resources>
<controls:MasterDetailsView MasterCommandBar="{StaticResource MasterCommandBar}"
Grid.Row="1"
x:Name="MasterDetailsViewControl"
ItemsSource="{x:Bind ViewModel.SampleItems, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
ItemTemplate="{StaticResource ItemTemplate}"
DetailsTemplate="{StaticResource DetailsTemplate}"
NoSelectionContentTemplate="{StaticResource NoSelectionContentTemplate}"
BorderBrush="Transparent" />
Related
I am using collection view in Xamarin and I don't know what reason the scrolling is not smooth. I implemented compiled binding and increased the Garbage collector size in android. I would like any recommendation on how to optimize the collection view, or point out what the problem is.
<CollectionView x:DataType="viewmodels:PageViewModel" ItemsSource="{Binding ItemList}" >
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="models:Item">
<StackLayout>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="5" Color="Silver"/>
<Grid RowSpacing="0" ColumnSpacing="0" Padding="15,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2" Grid.Column="0" Orientation="Horizontal">
<ff:CachedImage Source="Image.jpg" HeightRequest="50" WidthRequest="50" HorizontalOptions="Start">
<ff:CachedImage.Transformations>
<ffTrans:CircleTransformation />
</ff:CachedImage.Transformations>
</ff:CachedImage>
<StackLayout HorizontalOptions="FillAndExpand" Padding="10,0,0,0">
<Label Text="{Binding Name}" FontSize="Small"/>
<Label Text="{Binding Date, StringFormat='{0:dd MMM yyyy}'}" FontSize="Small"/>
</StackLayout>
</StackLayout>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="True" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="Icon.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="True" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" IsVisible="False" Source="img.png" WidthRequest="30" HorizontalOptions="End">
<ImageButton.Triggers>
<DataTrigger TargetType="ImageButton" Binding="{Binding .}" Value="False" >
<Setter Property="IsVisible" Value="True" />
</DataTrigger>
</ImageButton.Triggers>
</ImageButton>
<ImageButton Grid.Row="0" BackgroundColor="Transparent" Grid.Column="2" Source="Icon.png" WidthRequest="20" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Text="{Binding Text}" Margin="0,10"/>
<mediavideoplayer:VideoPlayer x:Name="mediaelement" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" IsEnabled="{Binding Attachments, Converter={StaticResource VideoVisibilityConverter}}" IsVisible="{Binding Attachments ,Converter={StaticResource VideoVisibilityConverter}}" DisplayControls="False" FillMode="ResizeAspectFill" HeightRequest="350" AutoPlay="True" Repeat="True">
<mediavideoplayer:VideoPlayer.Source>
<MultiBinding Converter="{StaticResource VideoUrlConverter}">
<Binding Path="Attachments.Path" />
<Binding Path="Attachments" />
</MultiBinding>
</mediavideoplayer:VideoPlayer.Source>
</mediavideoplayer:VideoPlayer>
<Image IsVisible="{Binding Attachments, Converter={StaticResource ImageVisibilityConverter}}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Aspect="AspectFill" Style="{StaticResource StCommentPicture}">
<Image.Source>
<MultiBinding Converter="{StaticResource UrlConverter}">
<Binding Path="Attachments.path" />
<Binding Path="Attachments" />
</MultiBinding>
</Image.Source>
</Image>
<StackLayout Grid.Row="3" Grid.Column="0" >
<Label Text="👍" />
<Label Text="😍" />
<Label Text="😂" />
<Label x:Name="LikesCount" Grid.Row="5" Grid.Column="1" Text="{Binding likes}" />
</StackLayout>
<Label Grid.Row="3" Grid.Column="2" HorizontalOptions="End" Text="{Binding Comments, StringFormat='{0} Comments'}" Margin="0,6"/>
<BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" VerticalOptions="EndAndExpand" HeightRequest="1" Color="LightGray" Margin ="0,5"/>
<Frame Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" x:Name="likeArea" Opacity="0" Padding="0" HasShadow="true" OutlineColor="#EEEEEE" CornerRadius="70">
<Grid x:Name="GridlikeArea" Padding="5,0" BackgroundColor="Transparent" ColumnDefinitions="*,*,*,*,*" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<ImageButton x:Uid="Like" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Source="Like.png" Clicked="LikeFrame_Clicked" ></ImageButton>
<ImageButton x:Name="Laugh" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="1" Aspect="AspectFit" Source="Laugh.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Love" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="2" Aspect="AspectFit" Source="love.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Sad" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="3" Aspect="AspectFit" Source="sad.png" Clicked="LikeFrame_Clicked"></ImageButton>
<ImageButton x:Name="Hate" BackgroundColor="Transparent" Grid.Row="0" Grid.Column="4" Aspect="AspectFit" Source="angry.png" Clicked="LikeFrame_Clicked"></ImageButton>
</Grid>
</Frame>
<Button x:Name="LikeButton" HeightRequest="40" BackgroundColor="{Binding Reactions,Converter={StaticResource ReactionColorConverter}}"
CornerRadius="50" Grid.Row="5" Grid.Column="0" ImageSource="{Binding Reactions, Converter={StaticResource ReactionImageConverter}}" Text="Like" Clicked="LikeButton_Clicked" HorizontalOptions="StartAndExpand"/>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<StackLayout HorizontalOptions="CenterAndExpand" Padding="0">
<Button BackgroundColor="Transparent" HorizontalOptions="CenterAndExpand" TextColor="#529dff" FontAttributes="Bold" Text="Load More..." Command="{Binding LoadMoreCommand}" Clicked="loadmorebutton_Clicked"/>
</StackLayout>
</CollectionView.Footer>
</CollectionView>
**Note: deleting the mediavideoplayer:VideoPlayer control wont make any difference **
The Issue is solved by the nuget Glidex. glidex.forms is small library we can use to improve Xamarin.Forms image performance on Android by taking a dependency on Glide. See my post on the topic here.
I'm trying to add button to this datatemplate but I cannot access the ICommand EditTripClick Command from the ViewModel.
So I am wondering is it possible to access it although I am in a datatemplate?
Example code of what I want to do
<CommandBar OverflowButtonVisibility="Auto">
<AppBarButton Label="Add trip" Icon="Add" Command="{x:Bind ViewModel.NewTripClickCommand}"/>
<AppBarButton Label="Refresh" Icon="Refresh" Command="{x:Bind ViewModel.RefreshClickCommand}"/>
</CommandBar>
<controls:Expander
Header="Current Trips"
Background="White"
IsExpanded="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay }"
IsEnabled="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay}">
<controls:AdaptiveGridView
Padding="{StaticResource MediumLeftRightMargin}"
animations:Connected.ListItemElementName="itemThumbnail"
animations:Connected.ListItemKey="animationKeyTripsView"
DesiredWidth="180"
ItemHeight="160"
IsItemClickEnabled="True"
ItemClickCommand="{x:Bind ViewModel.ItemClickCommand}"
ItemsSource="{x:Bind ViewModel.CurrentTrips, Mode=OneWay}"
SelectionMode="None"
StretchContentForSingleRow="False">
<controls:AdaptiveGridView.ItemTemplate>
<DataTemplate x:DataType="models:Trip">
<Grid
x:Name="a"
Padding="{StaticResource MediumBottomMargin}"
Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Button Name="TEST1" Height="30" Width="40"
HorizontalAlignment="Right" VerticalAlignment="Top" Grid.Row="0">
<SymbolIcon Symbol="More"/>
</Button>
<!--<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">-->
<TextBlock
Grid.Row="1"
Margin="{StaticResource XXSmallTopMargin}"
HorizontalAlignment="Center"
Style="{ThemeResource BodyTextStyle}"
Text="{x:Bind Title}" />
<!--</StackPanel>-->
</Grid>
</DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
</controls:Expander>
First, you could set name of the control which DataContext is your viewmodel, then bind the control to change your button's DataContext. For example, I add a StackPanel and set its name to MyRoot, then reference the its DataContext.
.xaml:
<StackPanel x:Name="MyRoot">
<CommandBar OverflowButtonVisibility="Auto">
<AppBarButton Label="Add trip" Icon="Add" Command="{x:Bind ViewModel.NewTripClickCommand}"/>
<AppBarButton Label="Refresh" Icon="Refresh" Command="{x:Bind ViewModel.RefreshClickCommand}"/>
</CommandBar>
<controls:Expander Header="Current Trips"
Background="White"
IsExpanded="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay }"
IsEnabled="{x:Bind ViewModel.HasCurrentTrips, Mode=OneWay}">
<controls:AdaptiveGridView DesiredWidth="180"
ItemHeight="160"
IsItemClickEnabled="True"
ItemClickCommand="{x:Bind ViewModel.ItemClickCommand}"
ItemsSource="{x:Bind ViewModel.CurrentTrips, Mode=OneWay}"
SelectionMode="None"
StretchContentForSingleRow="False">
<controls:AdaptiveGridView.ItemTemplate>
<DataTemplate x:DataType="local:Trip">
<Grid x:Name="a">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Button Name="TEST1" Height="30" Width="40"
Command="{Binding ElementName=MyRoot,Path=DataContext.EditTripClick}"
HorizontalAlignment="Right"
VerticalAlignment="Top" Grid.Row="0">
<SymbolIcon Symbol="More"/>
</Button>
<TextBlock
Grid.Row="1"
HorizontalAlignment="Center"
Text="{Binding Title}" />
</Grid>
</DataTemplate>
</controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>
</controls:Expander>
</StackPanel>
In addition, you need to set the DataContext in code-behind.
.cs:
this.DataContext = ViewModel;
I have a commandbar and on one of the appbar buttons I attached a flyout which shows up properly. This flyout again has a command bar with appbar buttons. The problem is that I wanted to open a flyout again on one of these buttons but that does not work. Please help!
<Page.Resources>
<Flyout x:Key="SetBookmarkFlyout">
<Grid Width="250" Height="250">
<TextBlock Grid.Row="0">Name</TextBlock>
<TextBox Grid.Row="1" x:Name="BookmarkName"></TextBox>
<TextBlock Grid.Row="2">Create in</TextBlock>
<ComboBox Grid.Row="3"></ComboBox>
</Grid>
</Flyout>
<Flyout x:Key="SubMenuFlyout">
<CommandBar Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="250" >
<AppBarButton Icon="Bookmarks" ToolTipService.ToolTip="Open Bookmarks"></AppBarButton>
<AppBarButton x:Name="SetBookmark" Icon="Favorite" ToolTipService.ToolTip="Set Bookmark" Click="SetBookmark_Click" FlyoutBase.AttachedFlyout="{StaticResource SetBookmarkFlyout}" ></AppBarButton>
<AppBarButton Icon="Page" ToolTipService.ToolTip="Recent Files"></AppBarButton>
</CommandBar>
</Flyout>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="0,0,0,-10" >
<CommandBar x:Name="Commandbar" Height="70" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<AppBarButton Icon="Back" Label="" ToolTipService.ToolTip="Back" ></AppBarButton>
<AppBarButton Icon="Forward" Label="" ToolTipService.ToolTip="Forward" ></AppBarButton>
<AppBarButton x:Name="SpaceAppBtn"></AppBarButton>
<AppBarButton Icon="Add" Label="" ToolTipService.ToolTip="Add Tab"></AppBarButton>
<AppBarButton Icon="Favorite" Label="" ToolTipService.ToolTip="Favorites (Set Bookmark,open Bookmarks, and see recent files)" Click="AppBarButton_Click" FlyoutBase.AttachedFlyout="{StaticResource SubMenuFlyout}">
</AppBarButton>
<AppBarButton Icon="Find" Label="" ToolTipService.ToolTip="Search"></AppBarButton>
</CommandBar>
</Grid>
I have added your Flyout directly to the Button in my example to test.
<AppBarButton x:Name="FavoriteButton" Icon="Favorite" Label="" ToolTipService.ToolTip="Favorites (Set Bookmark,open Bookmarks, and see recent files)"
Click="AppBarButton_Click">
<AppBarButton.Flyout>
<Flyout>
<CommandBar Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="250" >
<AppBarButton Icon="Bookmarks" ToolTipService.ToolTip="Open Bookmarks"></AppBarButton>
<AppBarButton x:Name="SetBookmark" Icon="Favorite" ToolTipService.ToolTip="Set Bookmark"
Click="SetBookmark_Cick">
</AppBarButton>
<AppBarButton Icon="Page" ToolTipService.ToolTip="Recent Files"></AppBarButton>
</CommandBar>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>
Use a Popup rather than the second Flyout.
After CommandBar add
<CommandBar>...
</CommandBar>
<Popup x:Name="SetBookmarkPopup" HorizontalOffset="200" VerticalOffset="200">
<Grid Width="250" Height="250">
<TextBlock Grid.Row="0">Name</TextBlock>
<TextBox Grid.Row="1" x:Name="BookmarkName"></TextBox>
<TextBlock Grid.Row="2">Create in</TextBlock>
<ComboBox Grid.Row="3"></ComboBox>
</Grid>
</Popup>
and call from your AppBarButton_Click event
private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
FavoriteButton.Flyout.ShowAt(FavoriteButton);
}
finally open the Popup
private void SetBookmark_Cick(object sender, RoutedEventArgs e)
{
SetBookmarkPopup.IsOpen = true;
}
Hope that helps
So I try to generate the xaml code below with visual studios, Silverlight.
But when I put parts into comment to check where my fault is, it never works.
So I would like to find out where my fault is so I can try to interact with Javascript
<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" ShowGridLines="True" Loaded="onLoaded">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="1*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Viewbox Stretch="Uniform" Grid.Row="1" Grid.Column="1">
<Canvas Height="300" Width="600">
<Rectangle Width="45" Canvas.Left="0" Canvas.Bottom="61.57098099504444" Height="160.95803800991115" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="0.0" Y1="157.95" X2="45.0" Y2="157.95" />
<Rectangle Width="45" Canvas.Left="75" Canvas.Bottom="112.86424230466895" Height="153.59151539066212" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="75.0" Y1="110.34" X2="120.0" Y2="110.34" />
<Rectangle Width="45" Canvas.Left="150" Canvas.Bottom="54.47593841460492" Height="120.54812317079018" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="150.0" Y1="185.25" X2="195.0" Y2="185.25" />
<Rectangle Width="45" Canvas.Left="225" Canvas.Bottom="178.28025619556524" Height="95.23948760886945" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="225.0" Y1="74.10000000000002" X2="270.0" Y2="74.10000000000002" />
<Rectangle Width="45" Canvas.Left="300" Canvas.Bottom="60.658737319718924" Height="82.68252536056214" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="300.0" Y1="198.0" X2="345.0" Y2="198.0" />
<Rectangle Width="45" Canvas.Left="375" Canvas.Bottom="176.2529831230876" Height="52.79403375382487" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="375.0" Y1="97.34999999999997" X2="420.0" Y2="97.34999999999997" />
<Rectangle Width="45" Canvas.Left="450" Canvas.Bottom="66.47512033126283" Height="129.84975933747432" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="450.0" Y1="168.6" X2="495.0" Y2="168.6" />
<Rectangle Width="45" Canvas.Left="525" Canvas.Bottom="31.87007514135977" Height="145.05984971728049" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="525.0" Y1="195.6" X2="570.0" Y2="195.6" />
<Rectangle Width="45" Canvas.Left="600" Canvas.Bottom="93.02414165274203" Height="156.551716694516" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="600.0" Y1="128.7" X2="645.0" Y2="128.7" />
<Rectangle Width="45" Canvas.Left="675" Canvas.Bottom="106.2876271364089" Height="30.724745727182178" Fill="Gray" Opacity="0.5" />
<Line Stroke="Black" StrokeThickness="3" X1="675.0" Y1="178.35000000000002" X2="720.0" Y2="178.35000000000002" />
<Rectangle Width="45" Canvas.Left="0" Canvas.Bottom="0" Height="148.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="75" Canvas.Bottom="0" Height="276.6" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="150" Canvas.Bottom="0" Height="183.0" Opacity="0.5" Fill="Yellow" />
<Rectangle Width="45" Canvas.Left="225" Canvas.Bottom="0" Height="142.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="300" Canvas.Bottom="0" Height="121.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="375" Canvas.Bottom="0" Height="237.0" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="450" Canvas.Bottom="0" Height="141.0" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="525" Canvas.Bottom="0" Height="100.5" Opacity="0.5" Fill="red" />
<Rectangle Width="45" Canvas.Left="600" Canvas.Bottom="0" Height="207.0" Opacity="0.5" Fill="Green" />
<Rectangle Width="45" Canvas.Left="675" Canvas.Bottom="0" Height="124.50000000000001" Opacity="0.5" Fill="red" />
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="0.0" X2="750.0" Y2="0.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="0" Canvas.Left="-50">0</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="30.0" X2="750.0" Y2="30.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="30" Canvas.Left="-50">2</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="60.0" X2="750.0" Y2="60.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="60" Canvas.Left="-50">4</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="90.0" X2="750.0" Y2="90.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="90" Canvas.Left="-50">6</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="120.0" X2="750.0" Y2="120.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="120" Canvas.Left="-50">8</TextBlock>
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="150.0" X2="750.0" Y2="150.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="150" Canvas.Left="-50">10</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="180.0" X2="750.0" Y2="180.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="180" Canvas.Left="-50">12</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="210.0" X2="750.0" Y2="210.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="210" Canvas.Left="-50">14</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="240.0" X2="750.0" Y2="240.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="240" Canvas.Left="-50">16</TextBlock>
<Line Stroke="Gray" StrokeThickness="1" X1="-50.0" Y1="270.0" X2="750.0" Y2="270.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="270" Canvas.Left="-50">18</TextBlock>
<Line Stroke="Gray" StrokeThickness="3" X1="-50.0" Y1="300.0" X2="750.0" Y2="300.0" Opacity="0.5" />
<TextBlock Canvas.Bottom="300" Canvas.Left="-50">20</TextBlock>
<TextBlock Canvas.Left="35" Canvas.Bottom="106.25" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Computersystemen 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="110" Canvas.Bottom="170.3" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Databanken 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="185" Canvas.Bottom="123.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Engels
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="260" Canvas.Bottom="103.25" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Frans
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="335" Canvas.Bottom="80" Foreground="White" VerticalAlignment="Center" Width="100" TextWrapping="Wrap" LineHeight="AUTO">
Boekhoudkundig inzicht
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="410" Canvas.Bottom="150.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Netwerken1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="485" Canvas.Bottom="102.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
Programmeren 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="560" Canvas.Bottom="60" Foreground="White" VerticalAlignment="Center" Width="80" TextWrapping="Wrap" LineHeight="AUTO">
Software engineering 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="635" Canvas.Bottom="135.5" Foreground="White" VerticalAlignment="Center" TextWrapping="Wrap" LineHeight="AUTO">
User interfaces 1
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="710" Canvas.Bottom="60" Foreground="White" VerticalAlignment="Center" Width="80" TextWrapping="Wrap" LineHeight="AUTO">
Management accounting
<TextBlock.RenderTransform>
<RotateTransform Angle="90" />
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
</Viewbox>
<Border Grid.Row="0" Grid.Column="1" Width="180" Height="200" BorderThickness="1">
<TextBlock Grid.Row="0" Grid.Column="1" TextAlignment="Center" FontSize="20">Fred Sanchez</TextBlock>
</Border>
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="0">
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Fred Sanchez
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Lois Weaver
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Denise Andrews
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Charles Butler
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Joan Willis
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Patrick Bailey
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Michael Elliott
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Wanda Bailey
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
Bonnie Collins
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White" Cursor="Hand" Margin="5">
<TextBlock>
John Black
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center">
<Border BorderThickness="1" BorderBrush="White">
<TextBlock Grid.Row="2" Grid.Column="1" TextAlignment="Center" FontSize="14" MouseLeftButtonUp="onSagemClicked" Margin="1">
Standaardafwijking en gemiddelde
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
<Border BorderThickness="1" BorderBrush="White">
<TextBlock Grid.Row="2" Grid.Column="1" TextAlignment="Center" FontSize="14" Margin="1">
Minimum en maximum
<TextBlock.Background>
<SolidColorBrush Color="White" />
</TextBlock.Background>
</TextBlock>
</Border>
</StackPanel>
</Grid>
I'm making an app for Windows Phone 8.1 and I've run into some troubles with how the elements are displayed on the screen in different resolutions.
My question is: How can I display two columns with X number of rows, where the width of the columns will stretch to the side of the screen, no matter the screen size (for phones).
[1] Just to give you a visual example, this is how I want it to look, no matter the screen size (picture number [1]): (There are more rows below, but I removed them for this example).
http://imgur.com/a/DTYsg
[2] However, on bigger screens (this case a 6-inch), the content does not stretch all the way out, as shown in picture number [2].
[3] I've tried adding a Viewbox around the content, but then the result is like picture number [3] in the imgur link (couldn't upload more than one link). It stretches out, but it doesn't give me two columns. I've tried setting a max width for the Viewbox as well, but it doesn't change anything.
My XAML code so far is:
<ScrollViewer>
<Grid>
<GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
<GridView.Header>
<TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
</GridView.Header>
<!-- Row 1 -->
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
<TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
<TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<!-- Row 2 -->
<GridViewItem Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
<TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
<TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
</GridView>
</Grid>
</ScrollViewer>
Thank you!
You can change the size of one from the GridViewItems in code behind
e.x.
public MainPage()
{
//....
var bounds = Window.Current.Bounds;
double height = bounds.Height;
double width = bounds.Width;
gridViewitem1.Width = width * 0.5f;
ContentGrid.Width = width;
}
I've tested it on all sizes.
EDIT:
You must change the width of the ContentGrid, too.
And remove the grid, wich is in the Scrollviewer
<ScrollViewer>
<GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
<GridView.Header>
<TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
</GridView.Header>
<!-- Row 1 -->
<GridViewItem x:Name="gridViewItem1" Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
<TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
<TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<!-- Row 2 -->
<GridViewItem Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
<TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
<TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
</GridView>