Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

Rotate Slider inside a scrollview

$
0
0

Hello,
I need to build a page of thermostat.
The page should have

  • list of column (one for hour in a day)
  • in each column there are: circle button, label, a vertical slider, a label and a circle button

I do it using a bindable StackLayout (Orientation Horizontal) inside a scrollview,
and inside the StackLayout I have a custom Slider.

In iOS it works well using in the renderer:
public override void Draw(CGRect rect)
{
base.Draw(rect);

                if (Control != null)
                {
                    Control.Transform = CGAffineTransform.MakeRotation(-(float)Math.PI / 2);
                }
        }

My problem is on Android
In the OnLayout code from SlideRenderer I add a
Control.Rotation = -((float)Math.PI / 2);
but nothing happens.

How should I rotate the Slider using renderer?

I try to add Rotation="-90" in the xaml without using renderers,
but in this way, when I run the app, in the page the Slider are rotated, but the width doesn't grow to fill the space available in the StackLayout, so the Sliders appears really small. How could I use Rotation and have the width of the Slider bigger?

This is my ScrollView (using Rotating way)

        <ScrollView VerticalScrollBarVisibility="Never" Orientation="Horizontal"  HorizontalScrollBarVisibility="Never"
                    VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="10,0,10,0" Padding="0" >                

            <StackLayout BindableLayout.ItemsSource="{Binding MyHours}" 
                Padding="0"  Margin="0" Spacing="0,0,0,10" Orientation="Horizontal">
                <BindableLayout.ItemTemplate>
                    <DataTemplate> 

                        <StackLayout VerticalOptions="FillAndExpand" Padding="0" Margin="0" Spacing="0,0,0,0" 
                                     Orientation="Vertical">

                            <ImageButton
                                BackgroundColor="Transparent"
                                Visual="Material"
                                Command="{Binding Padre.IncreaseTempeatureCommand}" CommandParameter="{Binding .}"                                   
                                HeightRequest="30"
                                WidthRequest="30">
                                <ImageButton.Source>
                                    <FontImageSource
                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                        Size="50"
                                        Glyph="&#xfb11;"
                                        Color="{StaticResource tabClimaFontColor}" />
                                </ImageButton.Source>
                            </ImageButton>


                            <Label Text="{Binding GradiRichiesti}" WidthRequest="30" 
                                       FontAttributes="Bold" TextColor="{StaticResource tabBarTextUnselectedColor}"
                                       VerticalTextAlignment="End" HorizontalTextAlignment="Center" />      

                            <renderers:CustomSlider 
                                            HeightRequest="5"    Rotation="-90"                             
                                            Maximum="100" HorizontalOptions="FillAndExpand"                                     
                                            Value="{Binding GradiRichiesti}"  
                                            MaximumTrackColor="White"
                                            MinimumTrackColor="{StaticResource tabClimaFontColor}"
                                            Minimum="0"
                                            VerticalOptions="FillAndExpand">


                                <renderers:CustomSlider.ThumbImageSource>

                                        <FontImageSource
                                            FontFamily="{DynamicResource MaterialFontFamily}"
                                            Glyph="&#xf599;"  
                                            Color = "{StaticResource GradientEndRedColor}" 
                                            Size="38" />

                                </renderers:CustomSlider.ThumbImageSource>

                            </renderers:CustomSlider>       


                            <Label Text="{Binding Orario}" FontAttributes="Bold" TextColor="Gray" VerticalTextAlignment="End" HorizontalTextAlignment="Center" />                        


                             <ImageButton
                                BackgroundColor="Transparent"
                                Visual="Material"
                                Command="{Binding Padre.DecreaseTempeatureCommand}" CommandParameter="{Binding .}"                                   
                                HeightRequest="30"
                                WidthRequest="30">
                                <ImageButton.Source>
                                    <FontImageSource
                                        FontFamily="{DynamicResource MaterialFontFamily}"
                                        Size="50"
                                        Glyph="&#xfb0b;"
                                        Color="{StaticResource tabClimaFontColor}" />
                                </ImageButton.Source>
                            </ImageButton>


                        </StackLayout>  

                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>

        </ScrollView>

Thanks!!


Viewing all articles
Browse latest Browse all 77050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>