调整按钮图片，使用绝对布局修复ImageButton在背景透明时出现的大小变化问题

projects/Demo/Demo/OnvifPage.xaml

@@ -5,13 +5,13 @@
              x:Class="Demo.OnvifPage">
     <AbsoluteLayout>
         <shared:VideoView x:Name="videoView"  AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
-        <ImageButton BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0,0.01,48,48" x:Name="back" Clicked="Back_Clicked" />
+        <ImageButton BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.01,0.01,48,48" x:Name="back" Clicked="Back_Clicked" />
         <ImageButton BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,0.01,48,48" x:Name="shot" Clicked="Shot_Clicked" />
-        <StackLayout BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,0.01,148,48" Orientation="Horizontal">
-            <Image BackgroundColor="Transparent" WidthRequest="48" HeightRequest="48" x:Name="mute" />
-            <Slider BackgroundColor="Transparent" WidthRequest="100" HeightRequest="48" Minimum="0" Maximum="100" ThumbColor="White" x:Name="volume" ValueChanged="Volume_ValueChanged" />
-        </StackLayout>
-        <Grid AbsoluteLayout.LayoutBounds=".5,1,210,270" AbsoluteLayout.LayoutFlags="PositionProportional" RowSpacing="10" ColumnSpacing="10">
+        <AbsoluteLayout BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.99,0.01,148,48">
+            <ImageButton BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0,0,48,48" x:Name="mute" Clicked="Mute_Clicked" />
+            <Slider BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1,0,100,48" Minimum="0" Maximum="100" ThumbColor="LightBlue" x:Name="volume" ValueChanged="Volume_ValueChanged" />
+        </AbsoluteLayout>
+        <Grid AbsoluteLayout.LayoutBounds=".5,0.99,210,270" AbsoluteLayout.LayoutFlags="PositionProportional" RowSpacing="10" ColumnSpacing="10">
             <Grid.RowDefinitions>
                 <RowDefinition Height="60" />
                 <RowDefinition Height="60" />
@@ -23,13 +23,13 @@
                 <ColumnDefinition Width="60" />
                 <ColumnDefinition Width="60" />
             </Grid.ColumnDefinitions>
-            <ImageButton Grid.Row="0" Grid.Column="1" BackgroundColor="Transparent" x:Name="up" Pressed="Control_Pressed" Released="Control_Released" ClassId="26up" />
-            <ImageButton Grid.Row="1" Grid.Column="0" BackgroundColor="Transparent" x:Name="left" Pressed="Control_Pressed" Released="Control_Released" ClassId="24left" />
-            <ImageButton Grid.Row="1" Grid.Column="1" BackgroundColor="Transparent" x:Name="stop" Pressed="Control_Pressed" Released="Control_Released" ClassId="23stopzoom" />
-            <ImageButton Grid.Row="1" Grid.Column="2" BackgroundColor="Transparent" x:Name="right" Pressed="Control_Pressed" Released="Control_Released" ClassId="25right" />
-            <ImageButton Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent" x:Name="down" Pressed="Control_Pressed" Released="Control_Released" ClassId="27down" />
-            <ImageButton Grid.Row="3" Grid.Column="0" BackgroundColor="Transparent" x:Name="zoomin" Pressed="Control_Pressed" Released="Control_Released" ClassId="21zoomin" />
-            <ImageButton Grid.Row="3" Grid.Column="2" BackgroundColor="Transparent" x:Name="zoomout" Pressed="Control_Pressed" Released="Control_Released" ClassId="22zoomout" />
+            <ImageButton Grid.Row="0" Grid.Column="1" Opacity="0.3" BackgroundColor="Transparent" x:Name="up" Pressed="Control_Pressed" Released="Control_Released" ClassId="26up" />
+            <ImageButton Grid.Row="1" Grid.Column="0" Opacity="0.3" BackgroundColor="Transparent" x:Name="left" Pressed="Control_Pressed" Released="Control_Released" ClassId="24left" />
+            <ImageButton Grid.Row="1" Grid.Column="1" Opacity="0.3" BackgroundColor="Transparent" x:Name="stop" Pressed="Control_Pressed" Released="Control_Released" ClassId="23stopzoom" />
+            <ImageButton Grid.Row="1" Grid.Column="2" Opacity="0.3" BackgroundColor="Transparent" x:Name="right" Pressed="Control_Pressed" Released="Control_Released" ClassId="25right" />
+            <ImageButton Grid.Row="2" Grid.Column="1" Opacity="0.3" BackgroundColor="Transparent" x:Name="down" Pressed="Control_Pressed" Released="Control_Released" ClassId="27down" />
+            <ImageButton Grid.Row="3" Grid.Column="0" Opacity="0.3" BackgroundColor="Transparent" x:Name="zoomin" Pressed="Control_Pressed" Released="Control_Released" ClassId="21zoomin" />
+            <ImageButton Grid.Row="3" Grid.Column="2" Opacity="0.3" BackgroundColor="Transparent" x:Name="zoomout" Pressed="Control_Pressed" Released="Control_Released" ClassId="22zoomout" />
         </Grid>
     </AbsoluteLayout>
 </ContentPage>

projects/Demo/Demo/OnvifPage.xaml.cs

@@ -2,6 +2,7 @@
 using LibVLCSharp.Shared;
 using System;
 using System.Net.Http;
+using System.Threading.Tasks;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
@@ -69,11 +70,6 @@ namespace Demo
             }
         }
 
-        private ImageSource SetImage(string image)
-        {
-            return ImageSource.FromResource($"Demo.wwwroot.images.{image}");
-        }
-
         private void Back_Clicked(object sender, EventArgs e)
         {
             if (this.videoView.MediaPlayer.IsPlaying)
@@ -100,17 +96,32 @@ namespace Demo
             if (this.videoView?.MediaPlayer != null)
             {
                 this.videoView.MediaPlayer.Volume = (int)e.NewValue;
-                if (this.videoView.MediaPlayer.Volume == 0)
+                if (this.videoView.MediaPlayer.Volume == 0 && this.mute.Source.ClassId != "mute.png")
                 {
                     this.mute.Source = SetImage("mute.png");
                 }
-                else
+                else if (this.mute.Source.ClassId != "volume.png")
                 {
                     this.mute.Source = SetImage("volume.png");
                 }
             }
         }
 
+        private void Mute_Clicked(object sender, EventArgs e)
+        {
+            if (this.videoView?.MediaPlayer != null)
+            {
+                if (this.videoView.MediaPlayer.Volume == 0)
+                {
+                    this.volume.Value = 50;
+                }
+                else
+                {
+                    this.volume.Value = 0;
+                }
+            }
+        }
+
         private void Control_Pressed(object sender, EventArgs e)
         {
             var videoUrl = new Url(this._url);
@@ -136,5 +147,12 @@ namespace Demo
             var client = new HttpClient();
             client.GetAsync(url).Wait();
         }
+
+        private ImageSource SetImage(string image)
+        {
+            var result = ImageSource.FromResource($"Demo.wwwroot.images.{image}");
+            result.ClassId = image;
+            return result;
+        }
     }
 }