I used to use the Frame control of Xamarin.Forms as a CardView for Android, but I updated the Xamarin.Forms package to version 3.1.0 and the frame appearence has changed. It doesn't have elevation and shadows. I tried to create a custom renderer, but doesn't work.
To explain what I'm trying to say, see the pictures below. First picture is the old behaviour of frame. The appearence is exactly like CardView in Android and the second picture is the new behaviour, for the version 3.1.0 of Xamarin.Forms. The frame doesn't have elevation and shadows.
Old behaviour:
New behaviour
Here is my code that I use the Frame (for Android Platform, CardView is a simple frame)
<customViews:CardView>
<StackLayout Spacing="0">
<StackLayout.Margin>
<OnPlatform x:TypeArguments="Thickness" Android="16"/>
</StackLayout.Margin>
<ContentView>
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS>
<customViews:HeaderDivider/>
</OnPlatform.iOS>
</OnPlatform>
</ContentView>
public class CardView : Frame
{
public CardView()
{
Padding = 0;
if (Device.RuntimePlatform == Device.iOS)
{
HasShadow = false;
OutlineColor = Color.Transparent;
BackgroundColor = Color.Transparent;
}
}
}
<Frame HasShadow="true">
<Label Text="Test"/
</Frame>
I guess after Update default value for HasShadow in Frame is set to false;
Related
I have different elements, controls and views wrapped in frames in order to apply corner radius, which is working fine on Android. But on the iOS side, even though the frame is round cornered, its contents does not clip to its radius but stays square as if nothing is applied.
Sample:-
<Frame BackgroundColor="{DynamicResource Theme}" CornerRadius="15" Padding="0">
<Image Source="{Binding PImage}" HeightRequest="132.5" Aspect="AspectFill"/>
</Frame>
Expected (Which happens in Android):-
Actual:-
How to make the frame contents respect the corner radius like what happens in Android ?
Clip the content of the frame to its boundaries:
<StackLayout Padding="30">
<Frame CornerRadius="30" Padding="0" IsClippedToBounds="True">
<Image Source="https://aka.ms/campus.jpg" />
</Frame>
</StackLayout>
https://stackoverflow.com/a/55611485/1039935
From shared code works in my local site :
The sample solution : Have a check with the version of Visual Studio and Xamarin Forms .Be sure that have updated to the latest version (Visual Studio: 16.6.5, Xamarin Forms : 4.7.0.1239).
Otherwise , you can create a Custom Frame Renderer in iOS to set CornerRadius .
Create a CustomFrame :
public class CustomFrame: Frame
{
}
Create a Custom renderer in iOS:
public class CustomFrameRenderer : FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
Layer.CornerRadius = Element.CornerRadius;
//Layer.CornerRadius = 15;
Layer.MasksToBounds = true;
}
}
In Xaml use the custom Renderer :
<local:CustomFrame BackgroundColor="CadetBlue"
Padding="0">
<Image Source="XamarinLogo.png"
HeightRequest="132.5"
Aspect="AspectFill" />
</local:CustomFrame>
I just started developing Xamarin
But I encountered a problem
I have a login screen and I want to play gif there
but unfortunately no images are coming
Works well for png and jpeg files
my code is below;
Content = new StackLayout
{
Padding = new Thickness(10, 40, 10, 10),
Children = {
new Label { Text = "Versiyon:"+DependencyService.Get<INativeCall>().getApplicationVersion(), FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), TextColor = Color.White, HorizontalTextAlignment=TextAlignment.Center },
new Image { Source = "a.gif" },
username,
password,
btnLogin,
indicator,
infoServer,
infoUpdate
}
};
By default, when an animated GIF is loaded it will not be played. This is because the IsAnimationPlaying property, that controls whether an animated GIF is playing or stopped, has a default value of false. This property, of type bool, is backed by a BindableProperty object, which means that it can be the target of a data binding, and styled.
Therefore, when an animated GIF is loaded it will not be played until the IsAnimationPlaying property is set to true.
Modify code of Image as bellow :
new Image { Source = "a.jpg", IsAnimationPlaying = true}
For example , this is my gif file :
Xaml code :
<Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" VerticalOptions="Start" />
<Image Source="timg.gif" IsAnimationPlaying="True"/>
The effect :
Please use the nuget package - Xamarin.FFImageLoading.It processes GIFs quickly.
eg XAML -
<ffimageloading:SvgCachedImage Grid.Row="3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="celebrate.gif" />
I have a Xamarin.Forms app and want to set the NavigationBar to be translucent. But when I do, I get a strange behavior with the Xamarin views:
ListViews or TableViews behave correctly. But when I wrap them in a RefreshView, they are overlapped by the UINavigationBar.
-- TRANSLUCENCY WITHOUT REFRESHVIEW: OKAY
<ContentPage>
<ListView>
...
</ListView>
</ContentPage>
-- TRANSLUCENCY WITHOUT REFRESHVIEW: BUGGY
<ContentPage>
<RefreshView> <----
<ListView>
...
</ListView>
</RefreshView>
</ContentPage>
Am I missing something?
Repro on GitHub: https://github.com/awaescher/xamarin-repro
How to make a translucent NavigationBar: https://xamgirl.com/transparent-navigation-bar-in-xamarin-forms/
We can use navigationPage.BarBackgroundColor = Color.Transparent to achieve that .
NavigateFromMenu method modified as follow :
case (int)MenuItemType.TranslucentWithoutRefreshView:
MenuPages.Add(id, CreateTranslucentNavigationPage(new TranslucentWithRefreshPage(),false));
break;
case (int)MenuItemType.TranslucentWithRefreshView:
MenuPages.Add(id, CreateTranslucentNavigationPage(new TranslucentWithRefreshPage(),true));
break;
Then in CreateTranslucentNavigationPage method :
private Xamarin.Forms.NavigationPage CreateTranslucentNavigationPage(Xamarin.Forms.Page page, bool value)
{
var navigationPage = new Xamarin.Forms.NavigationPage(page);
if (value)
{
navigationPage.BarBackgroundColor = Color.Transparent;
navigationPage.BarTextColor = Color.Black;
}
//Xamarin.Forms.PlatformConfiguration.iOSSpecific.NavigationPage.SetIsNavigationBarTranslucent(navigationPage, true);
return navigationPage;
}
The effect :
After updating the Xamarin Library and MAC OS to latest system, facing issue in Picker Background color and color of item that is selected/focused in picker for MAC Platform in my visual studio 2017.
Picker that is filled with multiple values
On opening the picker can not able to set the background color and the item that is selected is also not visible because of its color
How can I set the background color of that picker and the color of that focused/selected item of picker?
This seems to be caused for the new Theme used by Mojave.
One way to overcome this issue is by setting a value that will be visible on both Light and Dark them, for me it worked the Green.
Adding this to your XAML should be sufficient
<Picker.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="macOS" Value="Green"/>
</OnPlatform>
</Picker.TextColor>
Making the change only on your MacOs project leaving the others as they are.
<Picker HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Picker.Items>
<x:String>Dell</x:String>
<x:String>HP</x:String>
<x:String>Mac</x:String>
<x:String>Asus</x:String>
<x:String>Lenovo</x:String>
<x:String>Acer</x:String>
<x:String>Micrsoft</x:String>
</Picker.Items>
<Picker.TextColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="macOS" Value="Green"/>
</OnPlatform>
</Picker.TextColor>
</Picker>
Note: The TextColor will only affect the selected item text color.
Hope this helps.-
To change BackGroundColor of all Picker items for iOS you need to use custom renderer.
Your Picker in shared project
<StackLayout>
<Picker x:Name="picCities" ></Picker>
</StackLayout>
In your ContentPage cs file assign ItemsSource to Picker
public MainPage()
{
InitializeComponent();
picCities.ItemsSource = new List<string> { "Hyderabad", "Bhopal", "Indore", "Jabalpur", "Mumbai", "Ahmedabad" };
picCities.SelectedIndex = 0;
}
Now in your iOS project add one .cs file name PickerCustomRenderer & add this code
[assembly: ExportRendererAttribute(typeof(Picker), typeof(PickerCustomRenderer))]
namespace picker.iOS
{
public class PickerCustomRenderer : PickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
base.OnElementChanged(e);
UITextField textField = Control;
UIPickerView pickerView = textField.InputView as UIPickerView;
pickerView.BackgroundColor = UIColor.Red;
}
}
}
Output
Is there any way we can create Carousel View instead of Carousel page so that only portion of the page swipes left or right. Also I want to create this control in the Xamarin Forms and not specific to platform.
If we need to create this custom control in the xamarin.android or xamarin.iOS then what is the real benefits of using the Xamarin.forms where this simple requirements are not getting satisfied.
There's a well documented CarouselView project hosted on github:
https://github.com/chrisriesgo/xamarin-forms-carouselview
and
http://chrisriesgo.com/xamarin-forms-carousel-view-recipe/
The nuget package for the CarouselView is now available (v2.3.0-pre1):
https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1
We can use the CarouselView which was introduced in Xamarin forms 4.3. Now in Xamarin 4.6, we don't have to use the Forms.SetFlags("CollectionView_Experimental"); in appdelegate of iOS and mainactivity of android.
However, to use the indicatorview for the Carousel page we have to set this
Forms.SetFlags("IndicatorView_Experimental"); in appdelegate of iOS and mainactivity of android.
I have just implemented a similar thing. To create the a carousel view, I just created a horizontal Stacklayout, wrapped in a horizontal scroll view.
In my particular example, I needed to create an image gallery. I used the Camera control from the Xamarin.Labs project to get the image from either the camera roll or the camera itself. I then added this as a child to the Stacklayout.
Hope this helps.
As of Xamarin.Forms V2.2.0-pre1 CarouselView has now been added to Xamarin.Forms.
CarouselView
CarouselView is intended to fully replace CarouselPage. CarouselPage
will be deprecated in a future release. CarouselView is superior in
many ways, including its ability to be virtualized and nested within
layouts.
See https://forums.xamarin.com/discussion/63983/xamarin-forms-2-2-0-pre1-released#latest
Unfortunately there is no documentation on this as of yet.
EDIT:
CarouselView was Removed for Xamarin.Forms V2.2.0.31 because it wasn't ready for stable release. But from the look of it it will be merged back soon.
For now you can find the seperate CarouselView nuget package here: https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1
and you can use it like so:
Namespace:
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
Then we can simply add the CarouselView at the top of our page:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height=".3*"/>
<RowDefinition Height=".7*"/>
</Grid.RowDefinitions>
<cv:CarouselView ItemsSource="{Binding Zoos}" x:Name="CarouselZoos">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
<StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12">
<Label TextColor="White" Text="{Binding Name}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
<!--List of Monkeys below-->
</Grid>
more info: https://blog.xamarin.com/flip-through-items-with-xamarin-forms-carouselview/
If you use Xamarin.Forms V2.2.0-pre1 and you need to display different views for each page, you can use a derived class like that:
public class CarouselViewMultiPage : CarouselView
{
List<View> _children = new List<View> { };
public List<View> Children {
get { return _children; }
set {
_children = value;
OnPropertyChanged();
}
}
public CarouselViewMultiPage ()
{
this.ItemTemplate = new CarouselTemplateSelector();
this.ItemsSource = Children;
this.SetBinding(CarouselView.ItemsSourceProperty, "Children");
BindingContext = this;
}
}
public class CarouselTemplateSelector : DataTemplateSelector
{
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
DataTemplate dt = new DataTemplate();
View civ = (View)item;
return new DataTemplate(() =>
{
return civ;
});
}
}
so you can call it passing Views:
public App()
{
// The root page of your application
MainPage = new ContentPage {
Content = new CarouselViewMultiPage
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Children =
{
new Label() { Text="Page 1"},
new Label() { Text="Page 2"},
new Label() { Text="Page 3"},
}
}
};
}
CarouselView has been introduced in Xamarin forms v4.4. You can have a look at this. In additional to CarouselView, IndicatorView is also added to indicate the nth item in the carousel.