Am I missing something here? Is iOS simply not going to round the corners of this frame? It works in Android just fine.
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="MyProject.MyPopup">
<pages:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
<Frame x:Name="ButtonMenuWrapper"
HasShadow="False"
BackgroundColor="White"
IsClippedToBounds="True"
CornerRadius="20"
Padding="0"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout x:Name="ButtonMenu"
Orientation="Vertical"
Spacing="30"
HorizontalOptions="Center"
BackgroundColor="White"
VerticalOptions="Center"
Padding="20,20,20,20">
<Button x:Name="Button1"
WidthRequest="150"
Text="Option 1"
Clicked="Button1_Clicked"/>
<Button x:Name="Button2"
WidthRequest="150"
Text="Option 2"
Clicked="Button2_Clicked"/>
<Button x:Name="Button3"
WidthRequest="150"
Text="Option 3"
Clicked="Button3_Clicked"/>
</StackLayout>
</Frame>
</pages:PopupPage>
For some reason, the question system won't let me submit this without more do-called details. I don't know what else to say. This code works find in Android, but in iOS, the corners of the frame that is named ButtonMenuWrapper which surrounds the StackLayout called ButtonMenu will not round according to its CornerRadius property. If I have inadequately explained the issue, please ask for a specific clarification before penalizing me and disabling the question.
I test with your code , it works fine on iOS .
Version information
Visual studio : 16.6.4
Xamairn.Forms : 4.6.0.847
Rg.Plugins.Popup : 2.0.0.3
Related
To Limit maximum lines of Label and indicate text truncation we use MaxLines and LineBreakMode properties of Label control.
This works fine in Xamarin.Forms but in .Net maui it's not working.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Maui_POC.MainPage">
<ScrollView>
<StackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
<Image
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" />
<Label
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
<Label
Text="Welcome to .NET Multi-platform App UI, Cute dot net bot waving hi to you!"
SemanticProperties.HeadingLevel="Level2"
FontSize="18"
MaxLines="2"
LineBreakMode="TailTruncation"
HorizontalOptions="Center" />
<Button
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
</StackLayout>
</ScrollView>
</ContentPage>
Expected output:
It should show the Label with two lines and at the end of second line it will show '...' like this.
But in MAUI it's not working that way in both Android & iOS. In Android it does shows ellipsis but not the second line.
How to fix this problem?
Am new to xamarin forms, how to create Tabview, TabViewItems should be aligned in center, using communityToolkit in xamarin forms, want to create the view as below
Below is the code :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converter="clr-namespace:UIControls.Tabs"
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
x:Class="UIControls.Tabs.BottomTabs">
<converter:CustomTabView IsSwipeEnabled="True"
TabStripPlacement="Bottom"
SelectedIndex="0"
Style="{StaticResource TabViewStyle}"
HorizontalOptions="FillAndExpand">
<converter:CustomTabViewItem Text="Configuration"
Style="{StaticResource TabsItemStyle}"
IsSelected="True"
Icon="ic_router.png">
<xct:TabViewItem.Content>
<StackLayout>
<Label Text="TAB 1" />
</StackLayout>
</xct:TabViewItem.Content>
</converter:CustomTabViewItem>
<converter:CustomTabViewItem
Text="Monitoring"
Style="{StaticResource TabsItemStyle}"
Icon="ic_router.png">
<xct:TabViewItem.Content>
<ContentView />
</xct:TabViewItem.Content>
</converter:CustomTabViewItem>
<converter:CustomTabViewItem
Icon="ic_router.png"
Text="Diagnostics"
Style="{StaticResource TabsItemStyle}">
<xct:TabViewItem.Content>
<ContentView />
</xct:TabViewItem.Content>
</converter:CustomTabViewItem>
</converter:CustomTabView>
</ContentPage>
Required as below
I am trying to add an Indicator View style dots to my CarouselPage; However, the documentation I have found only shows how to use the new IndicatorView with CarouselView.
Is there anyway to use it with CarouselPage instead? If not, Is there anything similar to IndictorView that's used for CarouselPage? Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<CarouselPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Page.MainPage">
<ContentPage>
<StackLayout Padding="0,20,0,0">
<Image Source="LOGO.png"
HorizontalOptions="Center"
VerticalOptions="Center"
HeightRequest="195"
WidthRequest="205"
/>
<AbsoluteLayout HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="bg.png"
AbsoluteLayout.LayoutBounds="0.35, 0.6, -1, 1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="330"
WidthRequest="200"/>
<Image Source="Device.png"
AbsoluteLayout.LayoutBounds="0.45, 0.4, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="252"
WidthRequest="290"/>
</AbsoluteLayout>
<StackLayout>
<Label Text="Welcome"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="White"
Padding="0,15"
Font="Bold,20"/>
<Label Text="This is page 1"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FontSize="18"
Padding="25,0"
TextColor="White"/>
</StackLayout>
</StackLayout>
</ContentPage>
<ContentPage BackgroundColor="#3e454d">
<StackLayout BackgroundColor="#3e454d">
<AbsoluteLayout>
<Image Source="Map.png"
AbsoluteLayout.LayoutBounds="0.4, 0.7, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="330"
WidthRequest="205"/>
<Image Source="Device.png"
AbsoluteLayout.LayoutBounds="0.45, 0.7, -1, -1"
AbsoluteLayout.LayoutFlags="PositionProportional"
HeightRequest="282"
WidthRequest="340"/>
</AbsoluteLayout>
<StackLayout Padding="10,10">
<Label Text="Join US"
TextColor="White"
Padding="0,0,0,15"
Font="Bold,22"/>
<Label Text="This is Page 2"
HorizontalTextAlignment="Center"
FontSize="18"
TextColor="White"/>
</StackLayout>
</StackLayout>
</ContentPage>
</CarouselPage>
Use CarouselView instead of CarouselPage , embedd CarouselPage.Content to CarouselView.ItemLayout as mentioned in the documentation
Note that IndicatorView is different view, its not embedded in CarouselPage , even in CarouselView , you have to give the binding reference to CarouselView in order for it to work.
Also note that IndicatorView is still in Preview mode you need to set the experimental flag in order to make it work
Forms.SetFlags("IndicatorView_Experimental");
Also its showing Carouselview is in preview too(It was not, weird!)
so you may have to set experimental flag for that as well
Forms.SetFlags("CarouselView_Experimental");
This question already has answers here:
Vertical slider in Xamarin.forms?
(3 answers)
Closed 4 years ago.
I'm trying to create a vertical slider in Xamarin.Forms. However I always get an error when I try this code.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Project1.DeviceInfoView"
Title="{Binding DeviceName}">
...
<Slider x:Name="slider"
Grid.Row="0"
Grid.ColumnSpan="5"
MaximumTrackColor="Gray"
MinimumTrackColor="#F7941E"
Minimum="0"
Orientation="Vertical"
Maximum="10"
Margin="10,0"
Value="{Binding SliderValue}"/>
The error I'm getting is "Error: Position 65:25. No property, bindable property, or event found for 'Orientation', or mismatching type between value and property."
I've tried creating a new project and building a vertical slider in that but that didn't work. Any help is much appreciated! Thanks!
Agree with Ashray, If you want to achieve a vertical slider, just use Rotation="90" under the silder tab.
This is GIF of this running time.
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
BindingContext="{x:Reference Name=slider}"
Rotation="{Binding Path=Value }"/>
<Slider x:Name="slider"
Grid.Row="0"
Grid.ColumnSpan="5"
MaximumTrackColor="Gray"
MinimumTrackColor="#F7941E"
Minimum="0"
Rotation="90"
Maximum="10"
Margin="10,0"
/>
</StackLayout>
I've created an app using xamarin.forms. I just began testing the iOS side and my background image on the login screen looks zoomed in. On android the image displays correctly. Is there anything I need to change to get it to display correctly?
Mainpage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoyaltyWorx.MainPage"
BackgroundImage="bk3.jpg"
>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<!-- top controls -->
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<!-- middle controls -->
<BoxView HeightRequest="430"></BoxView>
<Button Text="Continue with Facebook" x:Name="LoginBtn" BackgroundColor="#4867aa" TextColor="White" FontFamily="Klavika" HorizontalOptions="CenterAndExpand" Clicked="LoginBtn_Clicked" />
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="End" HorizontalOptions="Center">
<!-- bottom controls -->
<Frame OutlineColor="White" HorizontalOptions="StartAndExpand">
<StackLayout Orientation="Horizontal" VerticalOptions="End" HorizontalOptions="Center">
<!-- bottom controls -->
<StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0">
<Label
Text="Terms and conditions"
FontSize="13"
TextColor="#71757a"
FontAttributes="Bold"
x:Name="LblTerms"/>
<Label
Text=" and"
FontSize="13"
TextColor="#71757a"
/>
<Label
Text=" privacy policy"
FontSize="13"
TextColor="#71757a"
FontAttributes="Bold"
x:Name="LblPrivacy"/>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>
</ContentPage>
Screenshots in both iOS and Android.
You can not play much on ContentPage Background image in In IOS its not picking up correctly. i will propose 2 solutions for you to get rid of this situation...
try both and get what matched to you
Solution 1
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoyaltyWorx.MainPage" >
<RelativeLayout>
<Image Source="bk3.jpg"
RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<PUT YOUR REST OF CODE HERE>
</RelativeLayout>
</ContentPage>
Solution 2
<?xml version="1.0" encoding="utf-8" >
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoyaltyWorx.MainPage"
Padding="0">
<Grid>
<Image Source="bk3.jpg" Aspect="AspectFill" />
<StackLayout>
<PUT YOUR REST OF CODE HERE>
</StackLayout>
</Grid>
</ContentPage>
Update me with which suites you best....