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>
Related
I have a StackLayout inside an AbsoluteLayout with some entries and a button, and the StackLayout has the LayoutBounds equal to "0,0,1,1" and the LayoutFlags equal to "All".
When I tap on the button, I show a Grid that has the same AbsoluteLayout properties described above, so that this Grid positions itself above the previous StackLayout, hiding all controls.
This Grid has a BoxView with a Gray color with some opacity, and an ActivityIndicator running.
Everything works as expected, except the fact that I still can tap on the entries (showing the virtual keyboard) and the button.
I know that this Grid is above the StackLayout with the controls, but why can I still tap on them ? I have the same solution in Xamarin Forms, and it works as expected, the controls have their events inhibited, since they are in a layer beneath.
Here is some sample code. For testing purposes, the Grid is already visible, but the intent is only making it visible after the tap on the button.
<?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="PdC.Views.SamplePage"
Title="SamplePage">
<AbsoluteLayout>
<VerticalStackLayout
BackgroundColor="White"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Padding="0,50,0,0"
Spacing="50">
<Entry
WidthRequest="200"
BackgroundColor="Yellow"
TextColor="Black"
Text="sample text on first entry" />
<Entry
WidthRequest="200"
TextColor="Black"
BackgroundColor="Yellow"
Text="sample text on second entry" />
<Button
Text="tap on me"
WidthRequest="200" />
</VerticalStackLayout>
<Grid
IsVisible="True"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<BoxView
ZIndex="9"
Grid.RowSpan="2"
BackgroundColor="Red"
VerticalOptions="FillAndExpand"
Opacity="0.5" />
<Frame
BackgroundColor="White"
Grid.Row="1">
<VerticalStackLayout
VerticalOptions="FillAndExpand">
<ActivityIndicator
IsRunning="True"
HorizontalOptions="Center"
Color="Red"/>
<Label
TextColor="Black"
Text="Please wait ..."
HorizontalOptions="Center"/>
</VerticalStackLayout>
</Frame>
</Grid>
</AbsoluteLayout>
</ContentPage>
As you can see, the entries and the button have their background color red with some transparency, meaning that the grid is above the stacklayout, but I still can tap on the entries (and the button) as the screenshots show.
Before tapping on the entry
After tapping the entry
Yes, it is the case as you said.
As a test, I replaced VerticalStackLayout with StackLayout and changed the property of BoxView from BackgroundColor="Red" to BackgroundColor="Transparent" .
Then I tested on xamarin forms, there was no such problem. This should be an issue in maui.
And I have created a new issue about this problem, you can follow it up here: https://github.com/dotnet/maui/issues/9514 .
Thanks for your feedback. Have a nice day.
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
I am playing with Xamarin Forms and I would like to add a Button programmatically. Nothing easier, but I've noted that the results vary greatly if the button has an Image rather than a Text.
Now I have this XAML that defines a three-layered screen (header, content, footer):
<?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:local="clr-namespace:Testing"
x:Class="Testing.MainPage"
Title="MainPage"
NavigationPage.HasNavigationBar="False">
<ContentPage.Content>
<!-- Content -->
<StackLayout x:Name="contentpage" Padding="10,100,10,100">
<!-- Header -->
<StackLayout x:Name="header" Orientation="Horizontal" VerticalOptions="StartAndExpand">
<Button Text="ABCD" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/>
<Button Text="EFGH" VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- /Header -->
<!-- Center -->
<StackLayout x:Name="content" Opacity="1" Orientation="Vertical" VerticalOptions="Start" >
<Button x:Name="test" Text="Fire fire fire" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" />
</StackLayout>
<!-- /Center -->
<!-- Bottom -->
<StackLayout x:Name="buttons" Orientation="Horizontal" VerticalOptions="EndAndExpand">
<Button Text="1" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="2" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="3" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="4" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
<Button Text="5" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />
</StackLayout>
<!-- /Bottom -->
</StackLayout> <!-- Content -->
</ContentPage.Content>
</ContentPage>
And in the corresponding C# source I add a button to the content:
var custombutton = new Button();
custombutton.HorizontalOptions = LayoutOptions.CenterAndExpand;
custombutton.VerticalOptions = LayoutOptions.Start;
custombutton.Image = "mountain.jpg";
//custombutton.Text = "hello";
content.Children.Add(
custombutton
);
As you can see, I want to change the button's properties by setting an image, but the layout changes dramatically.
As you can see, if I add the button with a text everything's ok (left), but as I change the button's image, the button seems to not obey its vertical options (right), or it adds some weird padding. Of course I would like just to add buttons with texts or images without losing the footer StackLayout, but I don't know what's happening here.
Am I missing something here?
Sizes Update
As suggested, I've tried different layouts, however, I ended up with the same results. This last test is with a Grid, and inside a ScrollView with a StackLayout. Different views and arrangements won't change anything in my project.
What matters is the image size as you can see:
Image sizes here are 1668 × 796 and 355 × 190 pixels.
A fully functional source is here available for download: link to the solution.
Controls Update
Using an Image works flawlessly, regardless of the image size. No clue on why a Button adds such a huge space dependent on the image.
I'm looking to create a specific animation where you start with a collapsed sidebar (still visible, but skinny) and main page content:
and when you pull out the left sidebar, the sidebar expands, and the main content moves with it (so that the right part of the main content slides out of view):
Also, note that the content in the sidebar doesn't move (though there is additional content that appears (button on the bottom)), but rather the width of the sidebar container just expands. Finally, I would like it to slide with my finger, not just be a static animation.
How do I accomplish this in Xamarin.Forms? (Is it possible?)
You can found it in Telerik Xamarin Forms sample (SlideDrawer -> Transitions/Location)
Sign in your account (telerik.com), I thinks it's free ..
Playing with the Xamarin Studio XAML Preview:
It is a matter of binding your expand event to WidthRequest in the first "column" to resize it and push the "right" side over. Depending upon the control settings in the first column, they will either expand to fill the new "column" width or stay a fixed size...
Note: Personally I would do this using ConstraintExpressions in order to make the design truly dynamic and adaptive to orientation changes, different screen sizes, etc...
<StackLayout RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"
RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.75}"
</StackLayout>
Example XAML from preview image above:
<?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="OpenDrawer.TestLayoutPreview">
<ContentPage.Content>
<StackLayout BackgroundColor="Blue" Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="Maroon" HorizontalOptions="Start" VerticalOptions="FillAndExpand" MinimumWidthRequest="100" WidthRequest="100">
<Button Text="Left 1" BackgroundColor="Aqua"></Button>
<Button Text="Left 2" BackgroundColor="Aqua"></Button>
<Button Text="Left 3" BackgroundColor="Aqua"></Button>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End">
<Button Text="Left Bottom" BackgroundColor="Lime"></Button>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" BackgroundColor="Red" HorizontalOptions="FillAndExpand">
<Label Text="Right" BackgroundColor="Aqua"></Label>
<ScrollView>
<WebView Source="https://xamarin.com" WidthRequest="1000" HeightRequest="1000" ></WebView>
</ScrollView>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
I don't how to center the icon inside the button and get it above the text, I didn't find information also about it, I'm asked to do a kind of "tabb" option menu, but below the screen, and I found that it was kind of "hard" because of the "design implications"etc, so I decided that with buttons would be easier, but the problem now is how to center the image and get the text right, If some one could help me, that would be great. This is my code so far:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="Silver"
x:Class="XamForm.View.MainPage">
<Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
<StackLayout Padding="30">
<Label x:Name="lblCuantos" Text="No #" TextColor="Gray" FontSize="20"/>
<Label x:Name="lblNombre" Text="" FontSize="20"/>
<Button x:Name="btn1" Text="Oprimir" Clicked="Accion"/>
<Button x:Name="btn2" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2"/>
<Button x:Name="btn3" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" TextColor="Gray" Clicked="Accion2"/>
</StackLayout>
</ContentPage>
This is the actual result of the button itself:
http://oi59.tinypic.com/11so9le.jpg
This is what the final result of the menu should look like kind off
http://oi62.tinypic.com/10pzw2f.jpg
Thank you!
You can use ContentLayout="Top,0" in button. For Example in your case use below code
<Button x:Name="btn2" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" Text="Gridd" TextColor="Gray" Clicked="Accion2" />
<Button x:Name="btn3" ContentLayout="Top,0" BackgroundColor="White" Image="iconRes.png" HorizontalOptions="CenterAndExpand" TextColor="Gray" Clicked="Accion2"/>
You could use a StackLayout with Orientation set to Vertical, and in it add Button and Label.
The Button.Image property is of type FileImageSource so any image that is 'local' can be used in a button. This means the following code will work:
someButton.Image = "imageName.png";
or you can write
someButton.Image = ImageSource.FromFile("imageName.png");
if imageName.png is located in each of the application projects (Resources folder in iOS, Resources/Drawable folder in Android, and application root in WinPhone; each with the appropriate build action set).
The Xaml equivalent is:
<Button Text="Has Image" Image="someImage.png" />
See the Working with Images doc for full details of what the build action should be for each platform.