Overlapping images in XAML when slider is moved

Roy Wold 21 Reputation points
2021-10-18T20:55:17.193+00:00

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

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,293 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,491 Reputation points Microsoft Vendor
    2021-10-19T03:02:33.257+00:00

    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://learn.microsoft.com/en-us/answers/articles/67444/email-notifications.html