I'm succesfully attaching a DataTemplate to my FlyoutItems and MenuItems in my Xamarin.Forms Shell App. However, how do I attach the same template to the ShellContent?
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:MyApp.Views"
xmlns:volDash="clr-namespace:MyApp.Views.VolDash"
xmlns:orgDash="clr-namespace:MyApp.Views.OrgDash"
x:Class="EventingVolunteers.AppShell"
FlyoutBackgroundColor="#337ab7">
<Shell.Resources>
<Style x:Key="FlyoutItemStyle" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Green"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<DataTemplate x:Key="FlyoutTemplates">
<Grid HeightRequest="{x:OnPlatform Android=50}" Style="{StaticResource FlyoutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50}"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Source="{Binding FlyoutIcon}"
VerticalOptions="Center"
HorizontalOptions="Center"
HeightRequest="{x:OnPlatform Android=24, iOS=22}"
WidthRequest="{x:OnPlatform Android=24, iOS=22}">
</Image>
<Label VerticalOptions="Center"
Text="{Binding Title}"
FontSize="{x:OnPlatform Android=14, iOS=Small}"
FontAttributes="Bold" Grid.Column="1">
<Label.TextColor>
White
</Label.TextColor>
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.Platforms>
<On Platform="Android" Value="20, 0, 0, 0" />
</OnPlatform.Platforms>
</OnPlatform>
</Label.Margin>
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<OnPlatform.Platforms>
<On Platform="Android" Value="sans-serif-medium" />
</OnPlatform.Platforms>
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</DataTemplate>
</Shell.Resources>
<FlyoutItem
x:Name="volFlyoutItem"
Title="Volunteer Dashboard"
FlyoutDisplayOptions="AsSingleItem"
FlyoutIcon="ic_dashboard_white.png"
Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
<ShellContent Title="Signups" Icon="ic_assignment.png">
<volDash:SignupsPage />
</ShellContent>
<ShellContent Title="Events" Icon="ic_event.png">
<volDash:AreasPage />
</ShellContent>
<ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
<volDash:MailboxPage />
</ShellContent>
<ShellContent Title="Rankings" Icon="fa_trophy.png">
<volDash:MyRankingsPage />
</ShellContent>
<ShellContent Title="Videos" Icon="ic_ondemand_video.png">
<volDash:TrainingVideoCategoriesPage />
</ShellContent>
</FlyoutItem>
<FlyoutItem
x:Name="orgFlyoutItem"
Title="Organizer Dashboard"
FlyoutDisplayOptions="AsSingleItem"
FlyoutIcon="ic_dashboard_white.png"
IsEnabled="False"
Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
<ShellContent Title="Events" Icon="ic_event.png">
<orgDash:EventsPage />
</ShellContent>
</FlyoutItem>
<ShellContent
Title="Account"
Icon="ic_account_box_white.png"
Shell.ItemTemplate="{StaticResource FlyoutTemplates}"
Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}">
<views:AccountPage />
</ShellContent>
<MenuItem
Shell.MenuItemTemplate="{StaticResource FlyoutTemplates}"
Text="Logout"
Icon="ic_dashboard_white.png"
Command="{Binding LogOutCommand}" />
</Shell>
Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified, without introducing additional views into the visual tree. This is possible because a subclassed Shell object can only ever contain FlyoutItem objects or a TabBar object, which can only ever contain Tab objects, which can only ever contain ShellContent objects. These implicit conversion operators can be used to remove the FlyoutItem, Tab, and ShellContent objects.
In your xaml,the ShellContent is a simplification of <FlayoutItme> <ShellContent/></FlayoutItme>,so you just need to add <FlayoutItme> outside it and add Shell.ItemTemplate.
<FlyoutItem
x:Name="account"
Title="Account"
FlyoutDisplayOptions="AsSingleItem"
FlyoutIcon="ic_account_box_white.png"
Shell.ItemTemplate="{StaticResource FlyoutTemplates}">
<ShellContent>
<views:AccountPage />
</ShellContent>
</FlyoutItem>
Related
I have a DataTrigger to set some styling based on the result of a validation (it is linked to a TextValidationBehaviour). It works fine, except I want it to trigger when the page loads so the user can see what they need to fill in (i.e. Entry is red until the user types something into it).
So is there any way to trigger the validation on page load?
Here is my code, but open to suggestions:
<Frame WidthRequest="350">
<StackLayout Orientation="Horizontal">
<Entry Style="{StaticResource Key=EntryInverted}" Placeholder="Last Name" Text="{Binding LastName}">
<Entry.Behaviors>
<toolkit:TextValidationBehavior x:Name="LastNameVal"
InvalidStyle="{StaticResource InvalidEntryStyle}"
Flags="ValidateOnValueChanged"
MinimumLength="2"
MaximumLength="99" />
</Entry.Behaviors>
</Entry>
</StackLayout>
<Frame.Style>
<Style TargetType="Frame" BasedOn="{StaticResource Key=EntryFrame}">
<Setter Property="BorderColor" Value="White"/>
<Style.Triggers>
<DataTrigger TargetType="Frame" Binding="{Binding Source={x:Reference LastNameVal}, Path=IsNotValid}" Value="True">
<Setter Property="BorderColor" Value="{StaticResource FrameErrorBorder}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Frame.Style>
</Frame>
You can add a trigger to the entry, such as:
<Entry >
<Entry.Triggers>
<MultiTrigger TargetType="Entry">
<MultiTrigger.Conditions>
<PropertyCondition Property="IsFocused" Value="false"/>
<PropertyCondition Property="Text" Value="{x:Null}"/>
</MultiTrigger.Conditions>
<Setter Property="BackgroundColor" Value="Red"/>
</MultiTrigger>
</Entry.Triggers>
</Entry>
The codes above will make the entry's background color show as red. And it will show the default background color when user taps the entry.
Or you want to the entry is red if the entry has no text in it. You can try the following code:
<Entry >
<Entry.Triggers>
<MultiTrigger TargetType="Entry">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={RelativeSource Self}, Path= Text.Length}" Value="0"/>
</MultiTrigger.Conditions>
<Setter Property="BackgroundColor" Value="Red"/>
</MultiTrigger>
<Trigger TargetType="Entry" Property="Text" Value="{x:Null}">
<Setter Property="BackgroundColor" Value="Red"/>
</Trigger>
</Entry.Triggers>
</Entry>
When you use the trigger above, the entry will be red until it has been typed something.
I have a somewhat unusual problem and I did not find any references in the searches I performed.
I have a Xamarin Forms application and on the login screen the Grid does not adjust to the layout and does not display any controls on the screen.
To make it easier to understand, I made the screen as simple as possible by replacing the background image with a solid color one.
I've already changed the login screen several times, but it didn't work. I've tried with the Grid, without the Grid, Grid with lines, Grid without lines, a Stacklayout for each line of the Grid, a single Stacklayout, with Frame, without Frame, but nothing solves.
And the worst thing is that in the tests done by the robot on firebase, they found no errors.
This only happens on some Xiaomi (on other devices, even Xiaomi, it doesn't).
I'm using VS 2019 and Xamarin Forms 4.8.0.1269.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:MySample.Controls"
BackgroundImage="solid.png"
x:Class="MySample.Views.LoginView">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,20,0,0" />
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Content>
<Grid x:Name="gridExterno"
RowSpacing="0"
ColumnSpacing="0"
Padding="30,20,30,5"
BackgroundColor="White"
Margin="30,5"
VerticalOptions="CenterAndExpand" HorizontalOptions="Center">
<Grid.MinimumHeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="600" Phone="300" Desktop="300"/>
</Grid.MinimumHeightRequest>
<Grid.MinimumWidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="800" Phone="600" Desktop="600"/>
</Grid.MinimumWidthRequest>
<Grid.WidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="800" Phone="600" Desktop="600"/>
</Grid.WidthRequest>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="logo.png" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,10,0,10">
<Image.WidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="350" Phone="300" Desktop="300"/>
</Image.WidthRequest>
</Image>
<StackLayout
Orientation="Vertical"
Grid.Row="1"
VerticalOptions="Center"
HorizontalOptions="Center"
Spacing="15"
Margin="10">
<Entry x:Name="EntryLogin"
TextChanged="OnEntryLoginTextChanged"
MaxLength="20"
Text=""
Keyboard="Numeric"
HorizontalOptions="FillAndExpand">
<Entry.WidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="400" Phone="300" Desktop="300"/>
</Entry.WidthRequest>
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="75" Phone="50" Desktop="50"/>
</Entry.HeightRequest>
<Entry.Margin>
<OnIdiom x:TypeArguments="Thickness" Tablet="0,0,0,20" Phone="0" Desktop="0"/>
</Entry.Margin>
<Entry.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="30" Phone="20" Desktop="20" />
</Entry.FontSize>
</Entry>
<Entry x:Name="EntryPassword"
Text=""
MaxLength="20"
IsPassword="True"
HorizontalOptions="FillAndExpand">
<Entry.Margin>
<OnIdiom x:TypeArguments="Thickness" Tablet="0,0,0,20" Phone="0" Desktop="0"/>
</Entry.Margin>
<Entry.WidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="400" Phone="300" Desktop="300"/>
</Entry.WidthRequest>
<Entry.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="75" Phone="50" Desktop="50"/>
</Entry.HeightRequest>
<Entry.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="28" Phone="20" Desktop="20"/>
</Entry.FontSize>
</Entry>
<StackLayout Orientation="Horizontal" Spacing="16" HorizontalOptions="FillAndExpand">
<StackLayout.Margin>
<OnIdiom x:TypeArguments="Thickness" Tablet="2,0" Phone="0" Desktop="0"/>
</StackLayout.Margin>
<CheckBox x:Name="ckRemember"/>
<Label Text="Remember Me" VerticalOptions="Center">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="26" Phone="18" Desktop="18"/>
</Label.FontSize>
</Label>
</StackLayout>
<Button x:Name="btnEntrar1"
Text="Enter"
BackgroundColor="{StaticResource ButtonPrimary}"
Clicked="OnLoginAsync"
TextColor="White"
HorizontalOptions="FillAndExpand">
<Button.WidthRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="400" Phone="300" Desktop="300"/>
</Button.WidthRequest>
<Button.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="75" Phone="50" Desktop="50"/>
</Button.HeightRequest>
<Button.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="18" />
</Button.FontSize>
<Button.Margin>
<OnIdiom x:TypeArguments="Thickness" Tablet="0,15,0,0" Phone="0" Desktop="0"/>
</Button.Margin>
</Button>
<Label x:Name="lblVersion"
VerticalOptions="End"
HorizontalTextAlignment="Center"
HorizontalOptions="Center">
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="20" Phone="16" Desktop="16"/>
</Label.FontSize>
<Label.Margin>
<OnIdiom x:TypeArguments="Thickness" Tablet="0,0,0,10" Phone="0,3,0,5" Desktop="0,3,0,5"/>
</Label.Margin>
</Label>
</StackLayout>
</Grid>
</ContentPage.Content>
</ContentPage>
Change the x:Name="gridExterno" HorizontalOptions to HorizontalOptions="CenterAndExpand"
I have this xaml collectionView code. I get visible selection on uwp but not on android 9.
<CollectionView Grid.Row="6" ItemsSource="{Binding SearchResults}" x:Name="searchResultCollection" Grid.ColumnSpan="2" SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Style="{StaticResource listViewGridStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BindingContext.SearchResultSelectionChangedCommand, Source={x:Reference searchResultCollection}}" CommandParameter="{Binding}"/>
</Grid.GestureRecognizers>
<Label Text="Start" Grid.Row="0" Grid.Column="0" Style="{StaticResource listViewLabelStyle}"/>
<Label Text="{Binding Start, Converter={StaticResource dateTimeToString}}" Grid.Row="0" Grid.Column="1" Style="{StaticResource listViewLabelStyle}"/>
<Label Text="{Binding SearchMatchLabel}" Grid.Row="1" Grid.Column="0" Style="{StaticResource listViewLabelStyle}"/>
<Label Text="{Binding SearchMatchHighlight}" TextType="Html" Grid.Row="1" Style="{StaticResource listViewLabelStyle}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I have updated to the current Xamarin.Forms Version, but the problem is still there. Any Ideas?
Update: I have added the selected background to my style, but it still doesn't work. I have try it with uwp with orange as backgroundColor, but light blue is displayed. It looks like that State does not change to Selected
<Style x:Key="listViewGridStyle" TargetType="Grid">
<Setter Property="RowSpacing">
<Setter.Value>
<OnIdiom Phone="0.1" Tablet="5" Desktop="5"/>
</Setter.Value>
</Setter>
<Setter Property="ColumnSpacing">
<Setter.Value>
<OnIdiom Phone="2" Tablet="10" Desktop="10"/>
</Setter.Value>
</Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="LightSkyBlue" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
Solution: I have added the Tapped Event
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" Command="{Binding BindingContext.SearchResultSelectionChangedCommand, Source={x:Reference searchResultCollection}}" CommandParameter="{Binding}"/>
</Grid.GestureRecognizers>
and in the code behind file I change the State manually:
private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
{
var nextSelected = sender as VisualElement;
if (_previousSelected != null) VisualStateManager.GoToState(_previousSelected, "Normal");
VisualStateManager.GoToState(nextSelected, "Selected");
_previousSelected = nextSelected;
}
I noticed that your Grid has a listViewGridStyle. I assume your grid has a backgroundColor so the default selected item color will not work. You need to Change selected item color by yourself.
Example is here:
<ContentPage ...>
<ContentPage.Resources>
<Style TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor"
Value="LightSkyBlue" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<StackLayout Margin="20">
<CollectionView ItemsSource="{Binding Monkeys}"
SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
...
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage>
The Style that contains the Selected VisualState must have a
TargetType property value that's the type of the root element of the
DataTemplate, which is set as the ItemTemplate property value.
Try it and feel free to ask me any question.
Now I don't know too much about control templates, but I'm trying to implement one following the article at: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/control-templates/creating
Question 1:
As far as I can tell, the ContentPresenter of a ControlTemplate simply displays exactly the content defined in the view that consumes the ControlTemplate, nothing more or less. Is my understanding correct?
Question 2 (I'll try my best to explain):
If the answer to (1) is yes, why is my ContentPresenter taking up more space than my content? See
My content is a StackLayout (green background) with Grid elements (pink background). Its dimension and position in the screenshot shown are exactly as I need. However, my ContentPresenter (red background) is expanding way beyond than its content (which is the green StackLayout).
If the answer to (1) is no, could the parent elements of the ContentPresenter (i.e, other elements in the ControlTemplate) be causing this?
Any help would be much appreciated. Thanks!
Edit 1 (Code I'm using):
The ContentPresenter in question belongs to a ControlTemplate targetting Xamarin.Forms.Platform.UWP.MasterDetailControl, as follows:
<Style TargetType="uwp:MasterDetailControl">
<Setter Property="ToolbarForeground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView PaneBackground="Transparent" x:Name="SplitView" IsPaneOpen="{Binding IsPaneOpen,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" DisplayMode="Overlay">
<SplitView.Pane>
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Visibility="{TemplateBinding MasterToolbarVisibility}">
<Button Name="PaneTogglePane" Style="{StaticResource MenuButton}"/>
</StackPanel>
<controls:DropShadowPanel Grid.Row="1" Style="{StaticResource MasterMenuDropShadow}" Margin="12.5,0,0,0">
<StackPanel Background="Yellow">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Assets\master_menu_pointer.png" />
<StackPanel Grid.Column="1" />
</Grid>
<ContentPresenter Padding="0"
Background="Red"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Master}"
Margin="0,-1,0,0" />
</StackPanel>
</controls:DropShadowPanel>
</Grid>
</SplitView.Pane>
Master (in Path=Master above) derives from a ContentPage with Content defined in its code behind as follows:
Content = new StackLayout
{
Children = {_firstPinkChild, _secondPinkChild},
Padding = 15,
Margin = 0,
Orientation = StackOrientation.Horizontal,
BackgroundColor = Color.Green,
HorizontalOptions = LayoutOptions.Start,
VerticalOptions = LayoutOptions.Start
};
Edit 2 (Some more styles being used):
<Style TargetType="controls:DropShadowPanel" x:Key="MasterMenuDropShadow">
<Setter Property="Color" Value="#595959"/>
<Setter Property="OffsetX" Value="-2"/>
<Setter Property="OffsetY" Value="0"/>
<Setter Property="BlurRadius" Value="50"/>
<Setter Property="ShadowOpacity" Value=".7"/>
</Style>
<Style TargetType="Button" x:Key="MenuButton">
<Setter Property="Width" Value="{StaticResource AppBarThemeCompactHeight}" />
<Setter Property="Height" Value="{StaticResource AppBarThemeCompactHeight}" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Margin="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="icon">
<DiscreteObjectKeyFrame KeyTime="0" Value="Assets\hamburger_onhover.icon.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Storyboard.TargetName="icon">
<DiscreteObjectKeyFrame KeyTime="0" Value="Assets\hamburger.icon.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Name="icon" Source="Assets\hamburger.icon.png" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
From official document,
The ContentView.Content property is set to a StackLayout that defines the content to be displayed on the ContentPage. This content will be displayed by the ContentPresenter contained in the TealTemplate.
For better understand please look the follow screenshot. The display air of ContentPresenter is the red block that placed in the row 2, column 0-1.
Your content will be displayed in the ContentPresenter.
<StackLayout BackgroundColor="Green">
<Label Text="Welcome to the app!" HorizontalOptions="Center" />
<Button Text="Change Theme" />
</StackLayout>
So, the answer of the first question is true. For your second question, you need to post your xaml code. Maybe you wrongly define the display area of ContentPresenter.
I hope to find an answer on customizing Datagrid from WPF toolkit 2010. I'd like to add a TITLE area to be above DataGridColumnHeaderPresenter of the datagrid. The problem is that I want it to be as a user control or data template where I can populate the title from XML. I want to have unique titles for multiple datagrids on one page getting data from one XML. I populate few datagrids in the same window. What will be the best solution to add customizable Tile area for a content populated from XML and bounded to each datagrid to avoid dublication?
Thank you in advance. I generate datagrid with columns this way:
<Custom:DataGrid Grid.Column="0" Grid.Row="1" x:Name="ServerList" ItemsSource="{Binding Source={StaticResource PagesData}, XPath=ListTiles/Tile1}">
<Custom:DataGrid.Columns>
<Custom:DataGridTextColumn Header="Name" Binding="{Binding XPath=#Name}" />
<Custom:DataGridTextColumn Header="Status" Binding="{Binding XPath=#Status}" />
<Custom:DataGridTextColumn Header="Events" Binding="{Binding XPath=#Events}" />
<Custom:DataGridTextColumn Header="Services" Binding="{Binding XPath=#Services}" />
</Custom:DataGrid.Columns>
<Custom:DataGrid x:Name="Events" Grid.Column="0" Grid.Row="2" ItemsSource="{Binding Source={StaticResource PagesData}, XPath=ListTiles/Tile2}" >
<Custom:DataGrid.Columns>
<Custom:DataGridTextColumn Header="Name" Binding="{Binding XPath=#Name}" />
<Custom:DataGridTextColumn Header="Level" Binding="{Binding XPath=#Level}" />
<Custom:DataGridTextColumn Header="Source" Binding="{Binding XPath=#Source}" />
<Custom:DataGridTextColumn Header="In last 24h" Binding="{Binding XPath=#TimeSpan}" />
</Custom:DataGrid.Columns>
<Custom:DataGrid x:Name="Services" Grid.Column="2" Grid.Row="2" ItemsSource="{Binding Source={StaticResource PagesData}, XPath=ListTiles/Tile3}">
<Custom:DataGrid.Columns>
<Custom:DataGridTextColumn Header="Name" Binding="{Binding XPath=#Name}" />
<Custom:DataGridTextColumn Header="Status" Binding="{Binding XPath=#Status}" />
<Custom:DataGridTextColumn Header="Start" Binding="{Binding XPath=#Start}" />
</Custom:DataGrid.Columns>
XML:
<?xml version="1.0" encoding="utf-8"?>
<ListTiles xmlns="">
<Tile1>
<Header Title="ROLES & GROUPS" />
<Server Name="Kim" Status="ready" Events="1" Services="1" />
<Server Name="Sherri" Status="past" Events="2" Services="1"/>
<Server Name="Mike" Status="future" Events="3" Services="1" />
</Tile1>
<Tile2>
<Header Title="EVENTS" />
<Server Name="Young" Level="average" Source="home" TimeSpan="5" />
<Server Name="Sarah" Level="Critical" Source="work" TimeSpan="6" />
<Server Name="Susan" Level="normal" Source="friend" TimeSpan="2" />
</Tile2>
<Tile3>
<Header Title="SERVICES" />
<Server Name="Josh" DisplayName="FF" Status="Running" Start="Auto" />
<Server Name="Amy" DisplayName="DD" Status="Rest" Start="Auto" />
<Server Name="Bill" DisplayName="AS" Status="Work" Start="Auto" />
</Tile3>
</ListTiles>