Can you guys please explain why the Frame doesn't respect the HeightRequest or WidthRequest?
Using those properties in other controls it works as expected.
For example, in this XAML I'm using a Frame and a BoxView:
<StackLayout Orientation="Horizontal"
HorizontalOptions="CenterAndExpand"
Padding="10">
<Frame VerticalOptions="Center"
HeightRequest="5"
WidthRequest="5"
BackgroundColor="Red"/>
<BoxView VerticalOptions="Center"
HeightRequest="5"
WidthRequest="5"
Color="Blue"/>
</StackLayout>
And the result is:
There is a big difference between the Frame's size and box's size, but it shouldn't have.
Frame has a default padding of 20. Set Padding="0".
See the remarks here: https://developer.xamarin.com/api/type/Xamarin.Forms.Frame/
Related
In the following XAML, I have a Frame that contains an AbsoluteLayout that contains an Image and a Label. I want the Image to be left justified and the Label to be centered (in the entire AbsoluteLayout object). Here is my XAML:
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<AbsoluteLayout BackgroundColor="Black">
<Image Source="{local:ImageResource App.Raindrops.png}"
WidthRequest="40"
HeightRequest="60" />
<Label Text="Sprinkle"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="White"
FontSize="36"/>
</AbsoluteLayout>
</Frame>
No matter what HorizontalOptions and VerticalOptions I use, I always get the following...
Notice that the label is not centered. Am I using the wrong layout? Am I missing, or using some wrong, attributes?
I am building the application in Visual Studio as a Xamarin.Forms app, and the deployment is being done to the standard Visual Studio Android emulator.
I found one solution here (which also has a great discussion on overlaying in XAML). The modified XAML is:
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
<AbsoluteLayout BackgroundColor="Black">
<Image
Source="{local:ImageResource App.Raindrops.png}"
WidthRequest="50"
HeightRequest="60"/>
<Label
Text="Sprinkle"
TextColor="White"
FontSize="36"
AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"/>
</AbsoluteLayout>
</Frame>
... and the result is this ...
... which is exactly what I wanted.
By the way, I came across this little tidbit in the documentation page for AbsoluteLayout:
I have circular buttons and am trying to change the size of them depending on if they are on phone or tablet using AbsolutLayout.
Here is my xaml:
<Frame BackgroundColor="{StaticResource ThemeColor}" Padding="0" CornerRadius="40" AbsoluteLayout.LayoutBounds="{StaticResource HomeCircle}" AbsoluteLayout.LayoutFlags="PositionProportional">
<Label Text="" HorizontalOptions="Center" VerticalOptions="Center" Style="{StaticResource Icon}" TextColor="{StaticResource LabelColor}"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Directions"/>
</Frame.GestureRecognizers>
</Frame>
<AbsoluteLayout.Resources>
<ResourceDictionary>
<OnIdiom x:Key="HomeCircle" x:TypeArguments="Frame" Phone=".85,.375, 80, 80"
Tablet=".85,.375, 120, 120"/>
</ResourceDictionary>
</AbsoluteLayout.Resources>
I looked at this resource and it did not work:
How to use attached properties such as Grid.Row, AbsoluteLayout.LayoutFlags to OnPlatform tag in Xamarin Forms
Edit: Have tried TypeArguments of Rectangle, AbsoluteLayout, and Frame and they all give this error:
Error XFC0009 No property, BindableProperty, or event found for "Phone", or mismatching type between value and property.
Edit: Have also looked at this thread and it provides the same error:
https://xamarin.github.io/bugzilla-archives/55/55183/bug.html
I faced the same problem in the past. My solution is to set the AbsoluteLayout bounds by Binding in place of StaticResource.
In the ViewModel:
public Xamarin.Forms.Rectangle HomeCircle => Xamarin.Forms.Device.Idiom == TargetIdiom.Phone ? new Xamarin.Forms.Rectangle(0.5f, 0.5f, 80, 80) : new Xamarin.Forms.Rectangle(0.5f, 0.5f, 120, 120);
In the yaml:
<AbsoluteLayout>
<Frame BackgroundColor="Gray"
Padding="0"
CornerRadius="40"
AbsoluteLayout.LayoutBounds="{Binding HomeCircle}"
AbsoluteLayout.LayoutFlags="PositionProportional">
<Label Text="TEST"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="Black"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DoSomething}"/>
</Frame.GestureRecognizers>
</Frame>
</AbsoluteLayout>
Anyway AbsoluteLayout.LayoutBounds requires Rectangle, and markup doesn't always allow everything :)
How To develop this type of Design(I have attached image below)
Supposedly you are referring to the bars, not the overall layout, but it's not 100% clear from your question. While there are other possibilities to display the bars, I achieved quite a satisfying result by nesting an AbsoluteLayout in a frame. See the following example for one of the bars on the right
<Frame HasShadow="False" HeightRequest="20" CornerRadius="5" HorizontalOptions="Fill" Padding="0" BackgroundColor="Silver" IsClippedToBounds="True">
<AbsoluteLayout>
<ContentView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,.33,1"
BackgroundColor="CadetBlue">
<Label Text="33%"
FontSize="Small"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="White"
FontAttributes="Bold" />
</ContentView>
</AbsoluteLayout>
</Frame>
The bar itself is wrapped by a Frame to get the rounded corners (see the CornerRadius property). Setting IsClippedToBounds to true is necessary, because otherwise the children won't be clipped and the rounded corners do not show.
Within the Frame there is the AbsoluteLayout the actual bars are placed in. And within, I added the dark-greenish bar as a ContentView (to be able to add a label with the percentage).
Please see the following code for one of the green/red bars. Basically it's the same, but I added two sub-bars within the absolute layout
<Frame HasShadow="False" HeightRequest="20" CornerRadius="5" HorizontalOptions="Fill" Padding="0" BackgroundColor="Silver" IsClippedToBounds="True">
<AbsoluteLayout>
<ContentView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,.25,1"
BackgroundColor="LimeGreen">
<Label Text="25%"
FontSize="Small"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="White"
FontAttributes="Bold" />
</ContentView>
<ContentView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="1,0,.75,1"
BackgroundColor="Red">
<Label Text="75%"
FontSize="Small"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="White"
FontAttributes="Bold" />
</ContentView>
</AbsoluteLayout>
</Frame>
Generalization
It'd be useful to extract a re-usable component. I will show for the simpler bar. Transferring the solution to the more complex one should be easy, though.
Code behind
In the code behind the following properties have to be added
public Rectangle FirstBarBounds => new Rectangle(0, 0, BarValue, 1);
public double BarValue
{
get => this._barValue;
set
{
if (this._barValue == value)
{
return;
}
this._barValue = value;
this.OnPropertyChanged();
}
}
(Adding a BindableProperty for BarValue could be useful, too, but admittedly I was too lazy.)
The properties can be bound to from XAML
<Frame ...>
<AbsoluteLayout>
<ContentView AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="{Binding FirstBarBounds}"
BackgroundColor="CadetBlue" >
<Label Text="{Binding FirstBarValue, StringFormat='{}{0:P0}'}"
FontSize="Small"
HorizontalOptions="Center"
VerticalOptions="Center"
TextColor="White"
FontAttributes="Bold" />
</ContentView>
</AbsoluteLayout>
</Frame>
The LayoutBounds of the ContentView is bound to BarBounds (which in turn uses BarValue to determine the bounds of the bar) and the text is bound to BarValue. Since BarValue is a double, the value is formatted to a percentage by StringFormat='{}{0:P0}'.
Screenshot
Please see the following screen shot on how the bars are rendered on an Android device (Emulator).
I am trying to get the box view of a content page to 'FillAndExpand' horizontally while making the height equal to it's width. So far for the xaml I've got:
<ContentPage Title="About" >
<StackLayout>
<BoxView x:Name ="imageBoxView" Color="AliceBlue" HorizontalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
But I don't know what value to keep for the Height Request.
You can set the binding context to itself, and then bind the HeightRequest to the view's Width.
Note: This will not work in the XAML preview mode in Visual Studio, but will work at runtime on the device.
<StackLayout>
<BoxView x:Name ="imageBoxView" Color="AliceBlue"
HorizontalOptions="FillAndExpand"
BindingContext="{x:Reference imageBoxView}"
HeightRequest="{Binding Width}" />
</StackLayout>
My ActivityIndicator is at the bottom of the Page, but it should be in the middle. I tried everything I found in the internet but nothing worked.
Image
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<SearchBar Placeholder="Parkhaus suchen" Text="{Binding SearchText}"/>
<ListView x:Name="HomeListView" ItemsSource="{Binding Parking}" HasUnevenRows="False" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Footer/>
</ListView>
</StackLayout>
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<ActivityIndicator IsRunning="{Binding IsBusy}" IsVisible="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center"/>
</StackLayout>
</AbsoluteLayout>
Try changing your StackLayout around your ActivityIndicator to use:
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
The PositionPropertional flag tells the AbsoluteLayout that the x and y position of the element is based on the size of the absolute layout, taking the size of the element into account. So 0.5 tells it to center the element within the AbsoluteLayout.
The values for the width and height are both set to -1. This is considered a "special value" for width and height meaning "Auto".