question

RoyWold-1049 avatar image
0 Votes"
RoyWold-1049 asked LeonLu-MSFT commented

Overlapping images in XAML when slider is moved

I have two images that I want to animate using XAML to show the current state of a slider.
I want the white dashes in the background and as I move the slider I will reveal more of the red image on top.
So when the slider is at min I have all white dashes and when the slider is at max the entire red dash image is revealed.

141457-momentum-power.png141484-momentum-power-white.png


dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

I wirte a demo that used your two images. And use RelativeLayout make two images covered at the same place, use the white BoxView(same width and height with image) to hide the momentumpower image. Your momentumpower image will be moved by the slider's value.



I wirte a code just using XAML without any background code.

<StackLayout Orientation="Horizontal">
        <RelativeLayout >
            
            <Image 
                
                 RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                 Source="momentumpowerwhite.png"/>
            <Image 
               
                x:Name="RPowerImage"
                   RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                   RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                   Source="momentumpower.png" 
                   TranslationX="{Binding Source={x:Reference slider},
                                  Path=Value}" 
                   />
            <BoxView BackgroundColor="WhiteSmoke" 
                     Margin="-5"
                     BindingContext="{x:Reference RPowerImage}" 
                     TranslationX="{Binding Width}"
                     WidthRequest="{Binding Width}"
                     HeightRequest="{Binding Height}"
                     ></BoxView>
        </RelativeLayout>
       
        <StackLayout>
            <Slider Maximum="75" Minimum="0" Value="75" WidthRequest="200" x:Name="slider"></Slider>
        </StackLayout>


===================Updte code===========================

Here is layout.

<StackLayout Orientation="Horizontal">

        <StackLayout
            Orientation="Vertical"
            >
            <Frame  HeightRequest="15" WidthRequest="120" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView x:Name="box12" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="110" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box11" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="100" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box10" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="90" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box9" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="80" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box8" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="70" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box7" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="60" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box6" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="50" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box5" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="40" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box4" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="30" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box3" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="20" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box2" BackgroundColor="White"></BoxView>
            </Frame>
            <Frame HeightRequest="15" WidthRequest="10" HorizontalOptions="Start" BorderColor="Black" Padding="2">
                <BoxView  x:Name="box1" BackgroundColor="White"></BoxView>
            </Frame>
        </StackLayout>
    

        <StackLayout>
            <Slider Rotation="-90" Margin="0,100,0,0" BackgroundColor="AliceBlue" ValueChanged="slider_ValueChanged" Value="0"    Maximum="12" Minimum="0" WidthRequest="250" x:Name="slider"></Slider>
           
        </StackLayout>
        
    </StackLayout>

Here is layout background code.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace SliderImage
{
    public partial class MainPage : ContentPage
    {
       
        public MainPage()
        {
            InitializeComponent();

            
        }

      

        private void slider_ValueChanged(object sender, ValueChangedEventArgs e)
        {
            switch (e.NewValue)
            {
                case double n when (n <= 0.5 && n > 0):
                    box1.BackgroundColor = Color.White;
                    box2.BackgroundColor = Color.White;
                    box3.BackgroundColor = Color.White;
                    box4.BackgroundColor = Color.White;
                    box5.BackgroundColor = Color.White;
                    box6.BackgroundColor = Color.White;
                    box7.BackgroundColor = Color.White;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;

                    break;

                case double n when (n <= 1&&n>0.5):
                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.White;
                    box3.BackgroundColor = Color.White;
                    box4.BackgroundColor = Color.White;
                    box5.BackgroundColor = Color.White;
                    box6.BackgroundColor = Color.White;
                    box7.BackgroundColor = Color.White;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;

                    break;

                case double n when (n <= 2 && n > 1):
                    Console.WriteLine($"I am between 3 and 6: {n}");
                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.White;
                    box4.BackgroundColor = Color.White;
                    box5.BackgroundColor = Color.White;
                    box6.BackgroundColor = Color.White;
                    box7.BackgroundColor = Color.White;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;

                    break;

                case double n when (n > 2 && n <= 3):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.White;
                    box5.BackgroundColor = Color.White;
                    box6.BackgroundColor = Color.White;
                    box7.BackgroundColor = Color.White;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;

                case double n when (n > 3 && n <= 4):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.White;
                    box6.BackgroundColor = Color.White;
                    box7.BackgroundColor = Color.White;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 4 && n <= 5):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.White;
                    box7.BackgroundColor = Color.White;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 5 && n <= 6):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.Red;
                    box7.BackgroundColor = Color.White;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 6 && n <= 7):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.Red;
                    box7.BackgroundColor = Color.Red;
                    box8.BackgroundColor = Color.White;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 7 && n <= 8):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.Red;
                    box7.BackgroundColor = Color.Red;
                    box8.BackgroundColor = Color.Red;
                    box9.BackgroundColor = Color.White;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 8 && n <= 9):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.Red;
                    box7.BackgroundColor = Color.Red;
                    box8.BackgroundColor = Color.Red;
                    box9.BackgroundColor = Color.Red;
                    box10.BackgroundColor = Color.White;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 9 && n <= 10):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.Red;
                    box7.BackgroundColor = Color.Red;
                    box8.BackgroundColor = Color.Red;
                    box9.BackgroundColor = Color.Red;
                    box10.BackgroundColor = Color.Red;
                    box11.BackgroundColor = Color.White;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 10 && n <= 11):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.Red;
                    box7.BackgroundColor = Color.Red;
                    box8.BackgroundColor = Color.Red;
                    box9.BackgroundColor = Color.Red;
                    box10.BackgroundColor = Color.Red;
                    box11.BackgroundColor = Color.Red;
                    box12.BackgroundColor = Color.White;
                    break;
                case double n when (n > 11 && n <= 12):
                    Console.WriteLine($"I am less than 50: {n}");

                    box1.BackgroundColor = Color.Red;
                    box2.BackgroundColor = Color.Red;
                    box3.BackgroundColor = Color.Red;
                    box4.BackgroundColor = Color.Red;
                    box5.BackgroundColor = Color.Red;
                    box6.BackgroundColor = Color.Red;
                    box7.BackgroundColor = Color.Red;
                    box8.BackgroundColor = Color.Red;
                    box9.BackgroundColor = Color.Red;
                    box10.BackgroundColor = Color.Red;
                    box11.BackgroundColor = Color.Red;
                    box12.BackgroundColor = Color.Red;
                    break;
                default:
                    break;
            }
        }
    }
}


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][4] to enable e-mail notifications if you want to receive the related email notification for this thread. [4]: https://docs.microsoft.com/en-us/answers/articles/67444/email-notifications.html

· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks Leon Lu, I forgot to mention that the animation should be vertical. So when you move the slider more and more red bar will be reviled.

0 Votes 0 ·

Should look like these.

141820-img-4585.jpg


141810-img-4586.jpg


0 Votes 0 ·
img-4585.jpg (178.4 KiB)
img-4586.jpg (196.7 KiB)

If you want to achieve this, you just need change your momentum-power-white.png, 1. set a background color(not set the background to the transparent),2. set all of the rectangles' background to the transparent.




0 Votes 0 ·

You can achieve this goal using the SkiaSharp library as well : SkiaSharp Namespace | Microsoft Docs, you will need to install the SkiaSharp nuget package.


You can get the sample code from here: xamarin/xamarin-forms-samples: Sample apps built using the Xamarin.Forms framework (github.com)
Either clone or download this repository (have to unzip file if you download), open the SkiaSharpFormsDemos.sln in Visual Studio (my path is -> \Downloads\xamarin-forms-samples-main\xamarin-forms-samples-main\SkiaSharpForms\Demos), build and run the application.


In the solution explorer, find this file "GradientTransitionsPage.xaml.cs" and change line 80 to this -> new SKPoint(0, rect.Bottom), and line 81 to this -> new SKPoint(0, rect.Top), then run the application. In the simulator, navigate to this page SkiaSharp Effects -> Gradient Transitions, move the slider and see the image change transition from bottom to top just like you want.

You have both images they want and use the slider to transition. To get the slider vertically, you can set the Rotation property in xaml to -90.

0 Votes 0 ·