As pointed out in this documentation -
https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter05/, specifying a height of 1 will give you 1, 2 or 3 pixels depending on the iOS device.
I want to put a separator into my view similar to a hr in HTML. I've done this by adding either a BoxView or StackLayout with a height of 1 and the necessary width.
This means that depending on the device, the separator will not always render at 1px. Is there something I can do to ensure that I will always get 1px for any device?
At the moment all I can think of is to place my content into ListView cells and leverage the native separators provided.
I think you are interpreting it wrong. Although you might actually get 1, 2 or 3 pixels, the user will see the same thing. This is due to the retina screens. Density will be higher, but the end result will be the same.
This is the same reason that you need to supply all images with the #2x and #3x suffix. The images will physically be bigger, but on iOS they will appear the same.
Following similar steps to the answer here https://stackoverflow.com/a/26570933/2931055 I ended up defining a global style that uses a static variable set up in the startup of iOS and Android, then defined in my stylekit to programmatically determine the fraction of a point I need for any given device.
In my portable project App.xaml.cs I defined
public static double ScreenDensity { get; set; }
Which needs to get populated independently for iOS and Android.
For iOS, in AppDelegate.cs in FinishedLaunching()
App.ScreenDensity = UIScreen.MainScreen.Scale;
Then for Android, in MainActivity.cs in OnCreate()
App.ScreenDensity = Resources.DisplayMetrics.Density;
UIScreen.MainScreen.Scale and Resources.DisplayMetrics.Density will evaluate to 1.0, 2.0 or 3.0 depending on the device.
In my portable project StyleKit (myApp\Helpers\StyleKit\SytyleKit.cs) I created a static variable to later use in a global style
using Xamarin.Forms;
namespace myApp.Helpers.StyleKit
{
public class Sizes
{
public static double Hairline = 1 / App.ScreenDensity;
}
}
Then in my global styles (myApp\App.xaml) I create the global style
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="myApp.App"
xmlns:stylekit="clr-myApp.Helpers.StyleKit;assembly=myApp">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="hairlineSeparator" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="#ddd" />
<Setter Property="HeightRequest" Value="{x:Static stylekit:Sizes.Hairline}" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
And finally when I want to use one in a xaml page
<!-- some content -->
<StackLayout Style="{StaticResource hairlineSeparator}"></StackLayout>
<!-- some content -->
Successfully tested on iOS and Android.
Related
I was able to create a transparent modal popup in Xamarin forms(Version 2.2.*) by setting the background color of a stack layout to Color.FromRgba(0,0,0,0.5).
But the same is not working when i updated my Xamarin Forms to Version 2.4.*. Do we have any alternate solution to achieve this without using any third party plugins?
I'm talking about using Xamarin.PushModalAsync(View) so that i could see through the View.
You can make a color transparent by setting its alpha channel to a value between 0 and 1.
Here is one I have in my resource dictionary
<Color x:Key="BlockingColor">
<x:Arguments>
<x:Double>0</x:Double>
<x:Double>0</x:Double>
<x:Double>0</x:Double>
<x:Double>0.75</x:Double>
</x:Arguments>
</Color>
The fourth parameter is the alpha channel. Setting it to 0.75 makes it semi-transparent.
You can then use it in a style
<Style x:Key="BlockingPanel" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="{StaticResource BlockingColor}" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
</Style>
And then use it in XAML
<StackLayout Style={StaticResource BlockingPanel}>
</Stacklayout>
I'm new to windows phone dev. My team used syncfusion for the dropdown treenavigator. I've tried tweaking the colors, margins and padding but wasn't able to change the FontSize. Any tips?
<sfnavigation: sfTreeNavigator>
<sfnavigation:sfTreeNavigatorItem FontSize="5"/>
</sfnavigation:sfTreeNavigator>
Sorry, my laptop crashed and I couldn't remember the setter syntax but yeah tried in that too. It won't update.
Can you check the sample which i have attached? I'm able to change the FontSize for SfTreeNavigatorItem.
Sample
Code which i have used are
<Style TargetType="navigation:SfTreeNavigatorItem">
<Setter Property="FontSize" Value="10"/>
</Style>
Regards,
Jegan Raj M
I have decided to try Xamarin Forms, because I thought that I can make one design for all platforms or at least Android and iOS.
However a simple form like:
<?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:app91="clr-namespace:App9;assembly=MasterDetail.Android"
x:Class="MasterDetail.CompetitorsListPage"
>
<StackLayout>
<Label Text="{Binding CurrentEvent.Name}"></Label>
<StackLayout Orientation="Horizontal">
<Button Text="By Place" Clicked="Button_OnClickedByPlace"></Button>
<Button Text="By Number" Clicked="Button_OnClickedByNumber"></Button>
<Button Text="By Rating" Clicked="Button_OnClickedByRating"></Button>
<Button Text="Change Event" Clicked="Button_OnClickedChangeEvent"></Button>
</StackLayout>
<ScrollView>
<ListView x:Name="couples" ItemSelected="Comps_OnItemSelected" ItemTapped="Couples_OnItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Round}"></Label>
<Label Text="{Binding Pos, StringFormat='({0}).'}"></Label>
<Label Text="{Binding Name}"></Label>
<Label Text="{Binding StartingNumber}" ></Label>
<Label Text="{Binding OldRating, StringFormat=' [{0}]'}"></Label>
<!--<Label Text="{Binding NewRating, StringFormat=' {0} ]'}"></Label>-->
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
</StackLayout>
</ContentPage>
Looks completely different on Android and iOS. I do not mind colours, but font size? I do not set font anywhere in the code or xaml.
Any idea what am I doing wrong?
Here it is a picture showing both versions:
This is by design. Forms is intended to provide a native experience on each platform by using their respective UI standards. Android has a different default color scheme than iOS. iOS default buttons look different than Android.
You can override the default fonts, sizes, colors, etc if you like in order to provide a more consistent UI. Xamarin has also introduced Themes for Forms which help you provide a consistent UI between platforms.
Because Android has variety of screen sizes and different screen DPI as compared to standard dpi and font sizes across iOS devices, it is not possible to create same look. But you can certainly change Theme in the MainActivity of your Droid project and increase font size as per your convenience. Beware that your theme's font size may be too big for small devices and too small for big devices. You can add scaling factor for font size in your theme, but I have not been very successful, instead, I tried to design a UI that will automatically fit for the best.
As per Xamarin Evolve 2016, some questions were raised regarding font sizes, they said it is difficult, but they are trying to make some unified font sizing.
Although Xamarin.Forms has everything in Xaml and C#, you still need to use iOS assets and Android resources to customize look and feel.
For me, #Jason's answer and comments from #Egg and #Bill Reiss are spot-on.
Meanwhile, so often clients request "same font size" across platforms that something like this finds its way into base Styles or Theme to account for what seems to be "natively smaller" fonts on Android:
<OnPlatform x:TypeArguments="Font">
<OnPlatform.iOS>Bold,Medium</OnPlatform.iOS>
<OnPlatform.Android>Bold,Large</OnPlatform.Android>
<OnPlatform.WinPhone>Bold,Medium</OnPlatform.WinPhone>
</OnPlatform>
Something similar can also be expressed in code at or near app startup, for example as a base Label font added to global Styles dictionary.
Just wanted to give a concrete example of what others above alluded to.
Strange behavior on iOS - as you can see those are labels in StackLayout, while in Android they behave OK, in iOS second and third label behave more lithe they were in some kind of grid rather than stack –
You have put 5 labels in a horizontal stack, and haven't changed the layout options on any of them. This will 'stack' all 5 labels next to each other, then size them based on the amount of text to be displayed. There is not enough horizontal space to accommodate all of the text, so the labels are wrapping vertically. The longest labels show the most wrapping, but as they get longer other labels wrap as well, which is why the Pos and OldRating data raps in some labels. When I'm working out layouts like this I often add different background colors to each control so I can see how they are laying out.
There are different ways to solve this depending on your desired result. If you want the entire line of text to wrap you can concatenate the data behind the scenes and add it as one label. If you want the name to wrap and the other data to display without wrapping you can set WidthRequests on the labels.
Hi in my application i displaying the news details. It contains template(hedaline, said by and story). I need to set the foreground of the each textblock as "White" irrespective of the theme color change. Is there any common plalce set the foreground color so it will affect whole page.
Please help me , dont tell me to set the foreground to all textblocks.
Define a Style (without a x:Key) for a TextBlock and it'll automatically affect all TextBlock in your application.
If you want it only affects the whole page, add a Foreground color to the page like this,
<phone:PhoneApplicationPage Foreground="{StaticResource PhoneAccentBrush}" ...
Please note that if you apply any style to your TextBlocks on this page, this color (in this case PhoneAccentBrush) will be overwritten by the color defined in the TextBlock's style.
you can refer to this link http://innovativesingapore.com/2010/08/experession_phone/ for creating style as follows
<phone:PhoneApplicationPage.Resources>
<Style x:Key="MyStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="White"/>
</Style>
</phone:PhoneApplicationPage.Resources>
And apply to the Text blocks as
<TextBlock Height="49" Name="textblock" Margin="67,49,0,0" Text="WhiteForegroundText" Style="{StaticResource MyStyle}" />
I am trying to create a custom application theme in Windows Phone 7 but unfortunately faced the following problem: If I try to change a Style and some of the default colors, as a result the Style is applied correctly but for some reason the colors are not. I mean my new Style uses the default colors instead of the custom ones.
Here is what I am doing:
1.I created a folder named CustomTheme with two ResourceDictionaries:
Brushes.xaml
Styles.xaml
2.Next I added them into App.xaml in this way:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CustomTheme/Brushes.xaml"/>
<ResourceDictionary Source="CustomTheme/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
3. After that I tried to use a sample Style from Styles.xaml in this way:
<TextBox Style="{StaticResource SomeStyle}"/>
4.As a result the Style is applied as expected(I mean the ControlTemplate is changed) but with the default colors instead of these specified in Brushes.xaml
I managed to find a workaround of the problem by adding Brushes.xaml in my Styles.xaml file instead of in App.xaml:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Brushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
I am asking for a suggestion. Is there a better solution of the problem? Why are the colors not merged correctly?
The solution that you have is the best that I know and is what we used when implementing RunKeeper, though we did also keep the equivalent of your Brushes.xaml in App.xaml, too.
Feels "broken" to be honest, but at least there's a usable workaround :)