MAUI: Slider header is not moving

Sreejith Sreenivasan 851 Reputation points
2024-07-02T07:08:24.18+00:00

I have a slider in my UI and I am not able to move it properly.

Below is the code:

<Slider 
    x:Name="watchme_slider"
    Grid.Column="1"
    BackgroundColor="White"
    MinimumTrackColor="#1c98d7"
    MaximumTrackColor="#9a9a9a"
    ThumbImageSource="ic_thumb_xx.png"
    ValueChanged="SliderValueChanged"
    Maximum="0.166666667"
    Minimum="0"
    HorizontalOptions="FillAndExpand"/>

This slider is on a ContentView and below is the full xaml code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    NavigationPage.HasNavigationBar="false"
    BackgroundColor="White"
    x:Class="MyProjectName.Pages.HomePage">

    <StackLayout 
        Orientation="Vertical">
        <ScrollView>
            <StackLayout>
                <Frame 
                    BorderColor="#ffffff"
                    BackgroundColor="#ededed"
                    Margin="10,10,10,5"
                    HasShadow="False"
                    CornerRadius="10"
                    Padding="5">

                    <StackLayout
                        Margin="5"
                        Orientation="Vertical">

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.5*" />
                                <ColumnDefinition Width="9.5*" />
                            </Grid.ColumnDefinitions>

                            <Label 
                                x:Name="slider_timer_label"
                                Grid.Column="1"
                                Text=" "
                                Margin="0,0,0,5"
                                Padding="3"
                                HorizontalOptions="Start" 
                                HorizontalTextAlignment="Center" 
                                VerticalOptions="EndAndExpand"
                                TextColor="#ededed">
                                <Label.FontSize>
                                    <OnIdiom x:TypeArguments="x:Double">
                                        <OnIdiom.Phone>12</OnIdiom.Phone>
                                        <OnIdiom.Tablet>18</OnIdiom.Tablet>
                                        <OnIdiom.Desktop>12</OnIdiom.Desktop>
                                    </OnIdiom>
                                </Label.FontSize>
                            </Label>
                        </Grid>

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="9*" />
                            </Grid.ColumnDefinitions>

                            <Label 
                                Margin="5"
                                HorizontalTextAlignment="End"
                                Grid.Column="0"
                                Text="0"
                                TextColor="Black">
                                <Label.FontSize>
                                    <OnIdiom x:TypeArguments="x:Double">
                                        <OnIdiom.Phone>16</OnIdiom.Phone>
                                        <OnIdiom.Tablet>24</OnIdiom.Tablet>
                                        <OnIdiom.Desktop>16</OnIdiom.Desktop>
                                    </OnIdiom>
                                </Label.FontSize>
                            </Label>

                            <Slider 
                                x:Name="watchme_slider"
                                Grid.Column="1"
                                BackgroundColor="White"
                                MinimumTrackColor="#1c98d7"
                                MaximumTrackColor="#9a9a9a"
                                ThumbImageSource="ic_thumb_xx.png"
                                ValueChanged="SliderValueChanged"
                                Maximum="0.166666667"
                                Minimum="0"
                                HorizontalOptions="FillAndExpand"/>
                        </Grid>

                        <Label 
                            x:Name="watchme_timer_label"
                            Margin="5,10,5,10"
                            Text=" "
                            HorizontalTextAlignment="Center"
                            HorizontalOptions="CenterAndExpand"
                            TextColor="#ededed">
                            <Label.FontSize>
                                <OnIdiom x:TypeArguments="x:Double">
                                    <OnIdiom.Phone>16</OnIdiom.Phone>
                                    <OnIdiom.Tablet>24</OnIdiom.Tablet>
                                    <OnIdiom.Desktop>16</OnIdiom.Desktop>
                                </OnIdiom>
                            </Label.FontSize>
                        </Label>
                    </StackLayout>
                </Frame>
            </StackLayout>
        </ScrollView>
    </StackLayout>
</ContentView>

I tried the slider on a demo project and it is working fine on it. I think the issue may be due to the parent layout of my UI. I have uploaded a demo project here for reproducing this issue.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,153 questions
0 comments
Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 71,596 Reputation points Microsoft Vendor
    2024-07-02T08:47:19.02+00:00

    Hello,

    From CarouselView document

    By default, CarouselView will display its items in a horizontal orientation. A single item will be displayed on screen, with swipe gestures resulting in forwards and backwards navigation through the collection of items.

    This issue is related to the scroll event conflict. When you scroll the Slide, your scroll event will be captured by the CarouselView 's swipe gestures.

    You can set IsSwipeEnabled="False" for your CarouselView, your Slider could be scrolled normally. If you need to switch other items in the CarouselView, you can use carouselView.ScrollTo(); to do it.

    <CarouselView 
x:Name="carouselView"
 IsSwipeEnabled="False"
Loop="False">

    By the way, if you do not want to set IsSwipeEnabled="False", you can use increase and decrease buttons to replace the slider.

    Best Regards,

    Leon Lu

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest