i'm triying to make a xaml that can be different in phone and tablet. I have something like this:
<OnIdiom x:TypeArguments="View">
<OnIdiom.Phone>
<ContentView VerticalOptions="CenterAndExpand">
...
<LineEntry x:Name="User" Style="{StaticResource Style1}"/>
...
</ContentView>
</OnIdiom.Phone>
<OnIdiom.Tablet>
<ContentView VerticalOptions="End">
...
<LineEntry x:Name="User" Style="{StaticResource Style2}"/>
...
</ContentView>
</OnIdiom.Tablet>
</OnIdiom>
But can't use the same id name in the codebehind. How can i do? i don't want to use 2 variables (for example userPhone and userTablet), for each platform. Is another way to accomplish that? thx!
Most properties on an object can be altered using OnIdiom or OnPlatform.
<Image Aspect="AspectFit" x:Name="logoImg">
<Image.HeightRequest>
<OnPlatform Default="400" Android="350" />
</Image.HeightRequest>
<Image.IsVisible>
<OnIdiom Default="True" Phone="False" />
</Image.IsVisible>
</Image>
So in your example (not tested)
<ContentView>
<ContentView.VerticalOptions>
<OnIdiom Default="End" Phone="CenterAndExpand" />
<ContentView.VerticalOptions>
</ContentView>
Related
I have this code and working no issue :
<input:AdvancedEntry Margin="0,10,0,0"
BorderColor="#D9DCDB"
CornerRadius="10"
IconColor="LightGray"
IconImage="icon_lock.png"
IsPassword="True"
Placeholder="{x:Static local:Strings.Password}"
Text="{Binding User.Password}"
TextColor="Black"
TextFontSize="18" />
I need to replace IconImage to this line :
<ffimageloadingsvg:SvgCachedImage WidthRequest="30" HeightRequest="30" Source="resource://AppTest.Resources.ic_lock_24px.svg"/>
It say error and input:AdvancedEntry not supported ffimageloadingsvg I need a solution for that or any hint can help me to achieve this code as well .
I have a custom control PickerWithDropdownIcon that is an AbsoluteLayout with a Picker and other controls inside. I am wondering if there is a way to access that inner Picker from XAML that uses the PickerWithDropdownIcon control.
PickerWithDropdownIcon.xaml:
<AbsoluteLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:svg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
x:Class="CollateralUploader.XAMLHelpers.PickerWithDropdownIcon">
<Picker x:Name="InnerPicker" />
<svg:SvgCachedImage AbsoluteLayout.LayoutBounds="1,0.5,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional"
Source="resource://CollateralUploader.Images.icon-down_arrow.svg">
<svg:SvgCachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="PickerArrow_Tapped" />
</svg:SvgCachedImage.GestureRecognizers>
</svg:SvgCachedImage>
</AbsoluteLayout>
In my View I'd like to do something like this:
<xh:PickerWithDropdownIcon>
<InnerPicker.SelectedItem="{Binding VehicleNumberText}" />
<InnerPicker.Items>
<x:String>Vehicle 1</x:String>
<x:String>Vehicle 2</x:String>
</Picker.Items>
</xh:PickerWithDropdownIcon>
Is it possible to do something like this?
Hi I am new to Xamarin Forms and am from native iOS development.
For showing alerts / action sheets I am using this https://github.com/aritchie/userdialogs.
For implementing this I followed this How to use Acr.UserDialogs.
I am getting alert successfully by following this, but now I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons..
Thanks in advance.
I need to customise the OK / Cancel Button's background color, alignment, frame values, hide and show the buttons.
As the author said, you could do this by creating a style and apply it in AlertConfig.
For example:
In the style.xml:
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- Used for the buttons -->
<item name="colorAccent">#AAAAAA</item>
<!-- Used for the title and text -->
<item name="android:textColorPrimary">#FFFFFF</item>
<!-- Used for the background -->
<item name="android:background">#DDDDDD</item>
<!-- Used for the Alignment -->
<item name="android:gravity">center_horizontal</item>
</style>
And you could find this style Id in the Resource.Designer.cs.
// aapt resource value: 0x7f0b0189
public const int AlertDialogCustom = 2131427721;
Then in the code create a AlertConfig to config the alertdialog:
AlertConfig alertConfig = new AlertConfig();
alertConfig.OkText = "OKOK";
alertConfig.Message = "Message";
alertConfig.Title = "Title";
alertConfig.AndroidStyleId=2131427721;
UserDialogs.Instance.Alert(alertConfig);
With Rg.Plugins.Popup Nuget you can customize the popup.
Finally I am not using any nugget packages. Now I created my own CustomAlert class. I hope it will helpful for any one.
#Miguel Angel please look at below code
In my CustomAlert.xaml file
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="wwww/2009/xaml" x:Class="MY.UserControls.CustomAlert">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid BackgroundColor="#656565" Opacity="0.5">
</Grid>
<StackLayout BackgroundColor="{StaticResource WhiteColor}" VerticalOptions="Center" Margin="10" Padding="10" >
<Label Text="Title" FontSize="18" HorizontalTextAlignment="Center" Margin="0,0,0,0" TextColor="Black"></Label>
<Label Text="Descrption." FontSize="14"
HorizontalTextAlignment="Start"
Margin="10,10,5,5"
VerticalOptions="Center" TextColor="Gray"></Label>
<Button Text="OK" TextColor="{StaticResource WhiteColor}"
Command="{Binding DismissCustomAlertCommand}"
HorizontalOptions="Center" VerticalOptions="Center"
BackgroundColor="Red" Margin="30,0,30,0" WidthRequest="400" HeightRequest="40"></Button>
</StackLayout>
</Grid>
</ContentView>
Thank you
I think my code is self explanatory:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<OnPlatform x:TypeArguments="Color">
<OnPlatform.iOS>
{DynamicResource rightBubbleFontColor}
</OnPlatform.iOS>
<OnPlatform.Android>
{DynamicResource rightBubbleFontColor}
</OnPlatform.Android>
<OnPlatform.Android>
{StaticResource rightBubbleFontColor}
</OnPlatform.Android>
</OnPlatform>
</Label>
I'm trying to dynamically bind a color to the label. Depending on the current platform, it has to be another type of resource (DynamicResource or StaticResource).
I get this exception when trying to build the solution:
System.ArgumentException: An item with the same key has already been added.
UPDATE
I now have this code:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}">
</OnPlatform>
</Label.TextColor>
</Label>
And I get the following error message:
Object reference not set to an instance of an object.
When I replace the binding to a color it works.
Working example:
<Label Style="{DynamicResource labelStyle}"
HorizontalTextAlignment="End" Text="{Binding message}">
<Label.TextColor>
<OnPlatform
x:Key="RightBubbleFontColor"
x:TypeArguments="Color"
iOS="Red"
Android="Green"
WinPhone="Blue">
</OnPlatform>
</Label.TextColor>
</Label>
So it has to be an issue with the way I'm trying to bind this I guess.
EDIT
Asked a new question to describe the problem better: https://stackoverflow.com/questions/39852888/xamarin-forms-use-dynamicresource-or-staticresource-depending-on-os
You have two <OnPlatform.Android> elements. I'm assuming the last would be <OnPlatform.WinPhone>.
EDITED
Now that you have that fixed, maybe try this for it to actually work?
<OnPlatform
x:Key="BubbleTextColor"
x:TypedArguments="Color"
iOS="{DynamicResource rightBubbleFontColor}"
Android="{DynamicResource rightBubbleFontColor}"
WinPhone="{StaticResource rightBubbleFontColor}" />
Then bind it where necessary.
Not sure if it will work any differently than what you already have, but I guess it's worth a shot.
I have a PivotControl inside a PPhoneAppplicationPage. Ideally I'd like to show the appbar items from the page at all times, and merge them with items defined in the UserControl which shows in each PivotItem. I've tried a few different things, but only the outer (the PhoneApplicationPage) appbar seems to show.
The AppBar items are owned by the Page, not the PivotItems. But you can add/remove then dynamically as needed:
Your Page has an ApplicationBar property which has a Buttons and a MenuItems property. Add and remove buttons/menuitems there programmatically as needed whenever a new PivotItem gets selected.
You can use different appbars for each pivot item in a pivot. try the code below
<phone:Pivot>
<i:Interaction.Triggers>
<appBarUtils:SelectedPivotItemChangedTrigger>
<appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SelectionMapping SourceIndex="0" TargetIndex="0"/>
</appBarUtils:SelectedPivotItemChangedTrigger.SelectionMappings>
<appBarUtils:SwitchAppBarAction>
<appBarUtils:AppBar Id="0" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="1" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="2" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.home.png" Text="home" Command="{Binding HomeNavigationCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.money.png" Text="collection" Command="{Binding CollectionPageCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}"/>
</appBarUtils:AppBar>
<appBarUtils:AppBar Id="3" BackgroundColor="{StaticResource AppBarBg}" ForegroundColor="{StaticResource Foreground}">
<appBarUtils:AppBarButton x:Name="ConfirmationAppBarButton" IconUri="/Assets\Images\appbar.cancel.rest.png" Text="cancel" Command="{Binding OrderCancelButtonCommand}"/>
<appBarUtils:AppBarButton IconUri="/Assets\Images\appbar.check.rest.png" Text="ok" Command="{Binding OrderConfirmationButtonCommand}" IsEnabled="{Binding Model.EnableCheck,Mode=TwoWay}" />
</appBarUtils:AppBar>
</appBarUtils:SwitchAppBarAction>
</appBarUtils:SelectedPivotItemChangedTrigger>
</i:Interaction.Triggers>
</phone:Pivot>