Image View blur effect sample

#HacktoberFest

Samples/Samples/Samples/Samples.csproj

@@ -80,6 +80,12 @@
     <Compile Include="Views\EffectsSwitchPage.xaml.cs">
       <DependentUpon>EffectsSwitchPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\EffectsViewBlurImagePage.xaml.cs">
+      <DependentUpon>EffectsViewBlurImagePage.xaml</DependentUpon>
+    </Compile>
+    <Compile Include="Views\EffectsViewPage.xaml.cs">
+      <DependentUpon>EffectsViewPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\MainPage.xaml.cs">
       <DependentUpon>MainPage.xaml</DependentUpon>
     </Compile>
@@ -206,6 +212,18 @@
       <SubType>Designer</SubType>
     </EmbeddedResource>
   </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="Views\EffectsViewPage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+  </ItemGroup>
+  <ItemGroup>
+    <EmbeddedResource Include="Views\EffectsViewBlurImagePage.xaml">
+      <Generator>MSBuild:UpdateDesignTimeXaml</Generator>
+      <SubType>Designer</SubType>
+    </EmbeddedResource>
+  </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\Portable\$(TargetFrameworkVersion)\Microsoft.Portable.CSharp.targets" />
   <Import Project="..\..\packages\Xamarin.Forms.2.3.4.247\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets" Condition="Exists('..\..\packages\Xamarin.Forms.2.3.4.247\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets')" />
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">

Samples/Samples/Samples/Views/EffectsPage.xaml

@@ -8,6 +8,7 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
         <Button Text="Label effects"
@@ -21,5 +22,9 @@
         <Button Text="Switch effects"
                 Clicked="OnSwitchButtonClicked"
                 Grid.Row="2" />
+
+        <Button Text="View effects"
+                Clicked="OnViewButtonClicked"
+                Grid.Row="3" />
     </Grid>
 </ContentPage>

Samples/Samples/Samples/Views/EffectsPage.xaml.cs

@@ -24,5 +24,10 @@ namespace FormsCommunityToolkit.Samples.Views
         {
             await Navigation.PushAsync(new EffectsSwitchPage());
         }
+
+        private async void OnViewButtonClicked(object sender, System.EventArgs e)
+        {
+            await Navigation.PushAsync(new EffectsViewPage());
+        }
     }
 }

Samples/Samples/Samples/Views/EffectsViewBlurImagePage.xaml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="FormsCommunityToolkit.Samples.Views.EffectsViewBlurImagePage"
+             xmlns:effects="clr-namespace:FormsCommunityToolkit.Effects;assembly=FormsCommunityToolkit.Effects"
+             Title="Blur image view effect">
+    <Grid Margin="10,20,10,0">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <Label Text="Blur a view containing an image"
+               Grid.Row="0" />
+        <!-- Binding the blur amount to the slider will currently not work because a bug in composition framework -->
+        <!-- To force it, you'll need to resize the window -->
+        <!--
+        <Slider x:Name="BlurSlider" Minimum="0" Maximum="25" />
+        <Image BindingContext="{x:Reference BlurSlider}"
+               Source="https://goo.gl/FMTSLB"
+               effects:BlurEffect.BlurAmount="{Binding Value}" />
+        -->
+        <Image Source="https://goo.gl/FMTSLB"
+               effects:ViewBlur.BlurAmount="10"
+               Grid.Row="1"/>
+    </Grid>
+</ContentPage>

Samples/Samples/Samples/Views/EffectsViewBlurImagePage.xaml.cs

@@ -0,0 +1,12 @@
+using Xamarin.Forms;
+
+namespace FormsCommunityToolkit.Samples.Views
+{
+    public partial class EffectsViewBlurImagePage : ContentPage
+    {
+        public EffectsViewBlurImagePage()
+        {
+            InitializeComponent();
+        }
+    }
+}

Samples/Samples/Samples/Views/EffectsViewPage.xaml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="FormsCommunityToolkit.Samples.Views.EffectsViewPage"
+             Title="View effects">
+    <Grid HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <Button Text="Blur image view effect"
+                Clicked="OnBlurImageButtonClicked"
+                Grid.Row="0" />
+    </Grid>
+</ContentPage>

Samples/Samples/Samples/Views/EffectsViewPage.xaml.cs

@@ -0,0 +1,17 @@
+using Xamarin.Forms;
+
+namespace FormsCommunityToolkit.Samples.Views
+{
+    public partial class EffectsViewPage : ContentPage
+    {
+        public EffectsViewPage()
+        {
+            InitializeComponent();
+        }
+
+        private async void OnBlurImageButtonClicked(object sender, System.EventArgs e)
+        {
+            await Navigation.PushAsync(new EffectsViewBlurImagePage());
+        }
+    }
+}