I have a grid with a label in it. The label has a text with a length larger than the width of the grid, hence it is wrapped. The grid however does not change its height based on the wrapped text, causing only the first line to be visible. I have set the grid rowheight to Auto.
Any other ideas?
EDIT: the code (a label in a grid)
<Grid RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="80*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label x:Name="This is a label which is wrapped" Grid.Row="0" Grid.Column="1" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" FontSize="16"/>
</Grid>
EDIT: image result
I tested your code and it works, my workload is Android11, API30.
<Grid RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="80*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label"
Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
VerticalOptions="Start"
FontSize="16"/>
</Grid>
Related
For some reason my button is not showing I want the bottom to be at the bottom and green but its not. Also is their any kind of editor for grids and placements of controls would make this easier.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="WellbeingNinja.Views.RunningPage">
<ContentPage.Content>
<Grid Padding="30,40,40,10">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label x:Name="lblduration" Text="Duration"></Label>
</StackLayout>
<Frame Grid.Column="0" Grid.Row="0" x:Name="frameTotalSpeed" VerticalOptions="StartAndExpand" CornerRadius="2" >
<StackLayout>
<Label x:Name="lblSpeedText" Text="Speed(miles)"></Label>
<Label x:Name="lblSpeed" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" x:Name="frameTotaldistance" VerticalOptions="StartAndExpand" CornerRadius="2" >
<StackLayout>
<Label x:Name="lblDistance" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lbldistanceText" Text="Dist" HorizontalOptions="Center"></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="0" x:Name="frmTotalMilesLeft" Grid.Row="1" VerticalOptions="StartAndExpand">
<StackLayout>
<Label x:Name="lblDistanceLeft" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lblavgPace" Text="Avg Pace (Min/Mil)"></Label>
</StackLayout>
</Frame>
<Frame Grid.Column="1" Grid.Row="1" x:Name="frmTotalCarolesBurned" VerticalOptions="StartAndExpand">
<StackLayout>
<Label x:Name="lblTotalCalories" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" Text="0.00" FontSize="Large" ></Label>
<Label x:Name="lblTotalCaloriesBurned" HorizontalOptions="Center" Text="Calories Burned"></Label>
</StackLayout>
</Frame>
<Button Grid.ColumnSpan="2" Grid.Row="3" Text="Start Workout"></Button>
</Grid>
</ContentPage.Content>
If you give each row with a fix height 200, then the Y position of row 3 is start from 600 and it may larger than the height of the screen. You add the Button at row 3 and it is out of the bounds of the screen. Then you won't see it in the screen.
Use a Auto would be better, it will automatically sizes to fit content in the row or column. You can also set the ColumnSpacing and RowSpacing to add some space between row and columnspace:
<Grid Padding="30,40,40,10" ColumnSpacing="30" RowSpacing="70">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="60*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Read the document about Grid to get more information and you can use StackLayout to achieve the UI too.
I have a swipeview from xml like this:
</swipeCardView:SwipeCardView.ItemTemplate>
<swipecardview:swipecardview.itemssource>
<x:array type="{x:type x:string}">
<x:string>card 1</x:string>
<x:string>card 2</x:string>
<x:string>card 3</x:string>
<x:string>card 4</x:string>
<x:string>card 5</x:string>
<x:string>card 6</x:string>
</x:array>
</swipecardview:swipecardview.itemssource>
</swipeCardView:SwipeCardView>
If I add this to the xaml, I get 6 elements, all showing my layout (which is good).
But I need to be able to set the amount of layouts programatically.
How do I bind it like it is done here only from code?
(Sorry, I am very new to this...)
: This is the full layout:
<swipeCardView:SwipeCardView
Grid.Row="0"
ItemsSource="{Binding CardItems}"
Grid.Column="1"
VerticalOptions="FillAndExpand">
<swipeCardView:SwipeCardView.ItemTemplate>
<DataTemplate>
<!--Content of Swipe. Just remove wrapping to get layout to render-->
<Grid RowSpacing="0" BackgroundColor="White">
<Grid.RowDefinitions>
<RowDefinition Height="1.5*" />
<RowDefinition Height="0.5*" />
<RowDefinition Height="1.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<!--Titel-->
<Grid Grid.Row="1" BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="arial"
TextColor="#272727"
Text="Anzeigentitel"
FontAttributes="Bold"
FontSize="20"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
<!--Beschreibung-->
<Grid Grid.Row="2" BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="arial"
TextColor="#272727"
HorizontalTextAlignment="Center"
Text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores."
FontSize="12"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
<!--Bottom-->
<Grid Grid.Row="3" BackgroundColor="White">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="1.5*" />
<RowDefinition Height="1.4*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Label
Grid.Row="1"
FontFamily="arial"
TextColor="#272727"
Text="id #00000000"
FontSize="10"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="arial"
TextColor="#272727"
Text="99"
VerticalOptions="FillAndExpand"
FontSize="9"
HorizontalOptions="Start" />
<ImageButton
Grid.Column="0"
Aspect="AspectFit"
BackgroundColor="#00000000"
HorizontalOptions="End"
Source="btn_star_small.png" VerticalOptions="Center" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
you can just assign the ItemsSource in code, or bind it to a model
List<string> data = new List<string>() { "a", "b", "c" };
mySwipeView.ItemsSource = data;
Need to draw a hierarchy like below image
I would suggest you use a Grid to achive the layout on the image.
here is an example how to use a Grid to achive the desired hierarchy:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//TOP
<StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalOptions="Center">
<Image Source="image_top" />
</StackLayout>
//CENTER
<StackLayout Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="Center">
<Image Source="image_center_left" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" HorizontalOptions="Center">
<Image Source="image_center_right" />
</StackLayout>
//BOTTOM
<StackLayout Grid.Row="2" Grid.Column="0" HorizontalOptions="Center">
<Image Source="image_bottom_far_left" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="1" HorizontalOptions="Center">
<Image Source="image_bottom_left" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="Center">
<Image Source="image_bottom_right" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="3" HorizontalOptions="Center">
<Image Source="image_bottom_far_right" />
</StackLayout>
</Grid>
Note: if you want to use the lines connecting the hierarchy (assuming that they are images), you will need to add 2 extra rows and add them between the images rows.
I created a hamburger menu in xamarin forms using master detail page.But I am unable to reduce the width of hamburger menu in uwp platform. Please let me know if there is way to reduce the width or it is the default width that hamburger menu occupies.
This is the code for Master Detail Page:
<MasterDetailPage.Master>
<local:SideDrawerListPage x:Name="sideDrawerListPage" WidthRequest="100" />
</MasterDetailPage.Master>
Code for Side Drawer List:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="menu.png" HorizontalOptions="Center" WidthRequest="100" HeightRequest="60" Margin="0,2,0,0"/>
<Grid Grid.Row="1" Padding="20" Margin="5,0,0,0" ColumnSpacing="0" RowSpacing="0" HeightRequest="75">
<Grid.RowDefinitions>
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
------------------
</Grid>
<Grid Grid.Row="2" BackgroundColor="{Binding SelectedBackgroundColorA}" HeightRequest="45" RowSpacing="0" ColumnSpacing="0">
--------
</Grid>
<Grid Grid.Row="3" BackgroundColor="{Binding SelectedBackgroundColorB}" HeightRequest="45" RowSpacing="0" ColumnSpacing="0">
--------
</Grid>
<Grid Grid.Row="4">
<ListView x:Name="listView" VerticalOptions="FillAndExpand" Margin="0,-8,0,-10" IsVisible="{Binding IsChildListVisible}" x:FieldModifier="public" ItemsSource="{Binding DashboardListItems}" BackgroundColor="#3c4a56">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!--BackgroundColor="{Binding SelectedBackgroundColor}"-->
<Grid BackgroundColor="#3c4a56">
<Grid.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Command}" CommandParameter="{Binding}"></TapGestureRecognizer>
</Grid.GestureRecognizers>
<Grid RowSpacing="0" ColumnSpacing="0">
----------------
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
Any help is appreciated!
How to reduce the width of hamburger menu in xamarin forms uwp platform
The control that matches MasterDetailPage is MasterDetailControl within UWP platform. And it has style resource. For your requirement, you could modify the style of MasterDetailControl and reduce the width of PaneTogglePane and ContentTogglePane button. I will post the complete style follow, you could use it directly.
<Application.Resources>
<ResourceDictionary>
<Style TargetType="uwp:MasterDetailControl">
<Setter Property="ToolbarForeground" Value="{ThemeResource DefaultTextForegroundThemeBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView x:Name="SplitView" IsPaneOpen="{Binding IsPaneOpen,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" DisplayMode="Overlay">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Visibility="{TemplateBinding MasterToolbarVisibility}" Background="{TemplateBinding ToolbarBackground}">
<Button Name="PaneTogglePane" Style="{ThemeResource PaneButton}" Width="30" Foreground="{TemplateBinding ToolbarForeground}"
AutomationProperties.Name="{Binding Path=(AutomationProperties.Name), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
AutomationProperties.HelpText="{Binding Path=(AutomationProperties.HelpText), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
AutomationProperties.LabeledBy="{Binding Path=(AutomationProperties.LabeledBy), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
AutomationProperties.AccessibilityView="{Binding Path=(AutomationProperties.AccessibilityView), RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
<TextBlock Margin="10,0,0,0" Style="{ThemeResource TitleTextBlockStyle}" VerticalAlignment="Center" Text="{TemplateBinding MasterTitle}" Visibility="{TemplateBinding MasterTitleVisibility}" Foreground="{TemplateBinding ToolbarForeground}"/>
</StackPanel>
<ContentPresenter x:Name="MasterPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Master}" />
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="TopCommandBarArea" HorizontalAlignment="Stretch" Background="{TemplateBinding ToolbarBackground}">
<uwp:FormsCommandBar x:Name="CommandBar" Background="{TemplateBinding ToolbarBackground}" MinHeight="{ThemeResource TitleBarHeight}" HorizontalAlignment="Stretch">
<uwp:FormsCommandBar.Content>
<Border x:Name="TitleArea" Height="{ThemeResource TitleBarHeight}" Visibility="{TemplateBinding DetailTitleVisibility}" HorizontalAlignment="Stretch">
<Grid x:Name="TitleViewPresenter" VerticalAlignment="Center" Background="{TemplateBinding ToolbarBackground}" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Width="30" Name="ContentTogglePane" Style="{ThemeResource PaneButton}" Foreground="{TemplateBinding ToolbarForeground}"
Visibility="{TemplateBinding ContentTogglePaneButtonVisibility}" />
<Image Grid.Column="1" Source="{TemplateBinding DetailTitleIcon}" />
<Border Grid.Column="2" Height="{ThemeResource TitleBarHeight}" Visibility="{TemplateBinding DetailTitleVisibility}">
<TextBlock Text="{TemplateBinding DetailTitle}" VerticalAlignment="Center" Margin="10,0,0,0" Foreground="{TemplateBinding ToolbarForeground}" Style="{ThemeResource TitleTextBlockStyle}" />
</Border>
<ContentPresenter Grid.Column="3" Content="{Binding DetailTitleView, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource ViewToRenderer}}" Visibility="{TemplateBinding DetailTitleViewVisibility}" HorizontalAlignment="Stretch" />
</Grid>
</Border>
</uwp:FormsCommandBar.Content>
</uwp:FormsCommandBar>
</Border>
<ContentPresenter x:Name="DetailPresenter" Grid.Row="1" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Detail}" />
<Border x:Name="BottomCommandBarArea" Grid.Row="2" HorizontalAlignment="Stretch"></Border>
</Grid>
</SplitView.Content>
</SplitView>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
Update
Sorry, I miss understand your requirement, if your want to reduce hamburger menu. you could set OpenPaneLength for SplitView within above style.
......
<ControlTemplate TargetType="uwp:MasterDetailControl">
<SplitView OpenPaneLength="100" x:Name="SplitView"
......
Please note, we need place above style in the uwp App.Xaml.
Requires a definition for "TitleViewPresenter" or child thereof, or will return null when content is overridden by default from here... thus causing a crash in MasterDetailControl.cs
_titleViewPresenter = GetTemplateChild("TitleViewPresenter") as FrameworkElement;
Xaml:
<ContentPresenter x:Name="TitleViewPresenter" Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DetailTitleView}" />
I am trying to understand the logic of the Grid layout structure in Xamarin.Forms.
I created some rows and columns with Grid tags and encoloured them with background colours to be able to check their width and height.
When I check the result, I see a lot of different outputs depending on the dimensions of devices.
Please check the emulators' outputs:
My application will be only a mobile application and it won't be displayed on any other platforms. I think these differences are too much for a mobile application. Is it possible to design adaptive UI with Xamarin or do we have to write separate codes for all different dimensions?
Or are there any logical errors in my xaml file?
<ContentView.Content>
<RelativeLayout Padding="0">
<!-- Background -->
<Image Aspect="AspectFill"
Source="bg.png"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1.2*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0"
BackgroundColor="Fuchsia" />
<StackLayout Grid.Column="1" Grid.Row="0"
BackgroundColor="Blue" />
<!--Title Starts-->
<StackLayout Grid.Column="1" Grid.Row="1"
BackgroundColor="Blue"
Padding="0, 2, 0, 0">
<Label Text="TITLE"
HorizontalOptions="Center"
TextColor="#28ddff"
FontSize="32"
BackgroundColor="Black"
Opacity="0.7">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="30"
Android="25" />
</Label.FontSize>
</Label>
<!--Title Ends-->
<!--SubTitle Starts-->
<Label Text="SUBTITLE"
HorizontalOptions="Center"
TextColor="#ffffff"
FontSize="32"
BackgroundColor="Black"
Opacity="0.7">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="32"
Android="27" />
</Label.FontSize>
</Label>
</StackLayout>
<!--SubTitle Ends-->
<!--Description Starts-->
<StackLayout Grid.Column="1" Grid.Row="2"
BackgroundColor="Blue">
<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco."
BackgroundColor="Transparent"
TextColor="White"
FontAttributes="Bold">
<Label.FontSize>
<OnPlatform x:TypeArguments="x:Double"
iOS="15"
Android="13" />
</Label.FontSize>
</Label>
</StackLayout>
<!--Description Ends-->
<StackLayout Grid.Column="1" Grid.Row="3">
<Button Text="LOGIN"
TextColor="#009de0"
BackgroundColor="White"
WidthRequest="120"
HorizontalOptions="Center"
Clicked="Handle_Clicked" />
</StackLayout>
</Grid>
</RelativeLayout>
</ContentView.Content>
I have to set a background image to the app and in this reason, I have begun with <RelativeLayout> tag. Hence, <RelativeLayout> or <AbsoluteLayout> tags mess up the structure of grids, I think or?