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="﬑"
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=""
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="﬋"
Color="{StaticResource tabClimaFontColor}" />
</ImageButton.Source>
</ImageButton>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
Thanks!!