Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.

Commit

Permalink
Add Threshold BindableProperty to SwipeView (#9574) fixes #8941 fixes #…
Browse files Browse the repository at this point in the history 
…8974
  • Loading branch information
@jsuarezruiz
jsuarezruiz committed Sep 18, 2020
1 parent 85f7e4f commit 7050f89
Show file tree
Hide file tree
Showing 11 changed files with 645 additions and 19 deletions.
195 changes: 195 additions & 0 deletions Xamarin.Forms.Controls/GalleryPages/SwipeViewGalleries/HorizontalSwipeThresholdGallery.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
<?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="Xamarin.Forms.Controls.GalleryPages.SwipeViewGalleries.HorizontalSwipeThresholdGallery"
Title="Horizontal SwipeThreshold Gallery">
<ContentPage.Resources>
<ResourceDictionary>

<Color x:Key="BackgroundColor">#2E249E</Color>
<Color x:Key="SwipeItemBackgroundColor">#FE744D</Color>
<Color x:Key="TitleColor">#55A1FA</Color>
<Color x:Key="SubTitleColor">#FFFFFF</Color>

<Style x:Key="TitleStyle" TargetType="Label">
<Setter Property="FontSize" Value="10" />
<Setter Property="TextColor" Value="{StaticResource TitleColor}" />
<Setter Property="Margin" Value="12, 18, 6, 6" />
</Style>

<Style x:Key="SubTitleStyle" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource SubTitleColor}" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Margin" Value="12, 0, 6, 6" />
</Style>

<Style x:Key="SwipeItemTextStyle" TargetType="Label">
<Setter Property="TextColor" Value="White" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
</Style>

</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout
Padding="12">
<Label
Text="The Threshold property is only implemented for now on Android and iOS."
BackgroundColor="Black"
TextColor="White"/>
<Label
Text="Default Threshold (Reveal Mode)"/>
<SwipeView
HeightRequest="80">
<SwipeView.RightItems>
<SwipeItems
Mode="Reveal">
<SwipeItem
BackgroundColor="{StaticResource SwipeItemBackgroundColor}"
Icon="calculator.png"
Text="SwipeItem"/>
</SwipeItems>
</SwipeView.RightItems>
<SwipeView.Content>
<Grid
BackgroundColor="{StaticResource BackgroundColor}"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Text="Default Threshold Behavior"
Style="{StaticResource TitleStyle}"/>
<Label
Grid.Row="1"
Text="Swipe to Left"
Style="{StaticResource SubTitleStyle}"/>
</Grid>
</SwipeView.Content>
</SwipeView>
<Label
Text="Custom Threshold (only one SwipeItem using Reveal Mode)"/>
<Slider
x:Name="ThresholdRevealSlider"
Maximum="200"
Minimum="50"
Value="80"
MaximumTrackColor="Gray"
MinimumTrackColor="{StaticResource BackgroundColor}"
ThumbColor="{StaticResource BackgroundColor}"
ValueChanged="OnThresholdRevealSliderChanged"/>
<SwipeView
x:Name="RevealThresholdSwipeView"
Threshold="{Binding Source={x:Reference ThresholdRevealSlider}, Path=Value}"
HeightRequest="80">
<SwipeView.RightItems>
<SwipeItems
Mode="Reveal">
<SwipeItem
BackgroundColor="{StaticResource SwipeItemBackgroundColor}"
Icon="calculator.png"
Text="SwipeItem"/>
</SwipeItems>
</SwipeView.RightItems>
<SwipeView.Content>
<Grid
BackgroundColor="{StaticResource BackgroundColor}"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Text="Default Threshold Behavior"
Style="{StaticResource TitleStyle}"/>
<Label
Grid.Row="1"
Text="Swipe to Left"
Style="{StaticResource SubTitleStyle}"/>
</Grid>
</SwipeView.Content>
</SwipeView>
<Label
Text="Default Threshold (Execute Mode)"/>
<SwipeView
HeightRequest="80">
<SwipeView.RightItems>
<SwipeItems
Mode="Execute">
<SwipeItem
BackgroundColor="{StaticResource SwipeItemBackgroundColor}"
Icon="calculator.png"
Text="SwipeItem"/>
</SwipeItems>
</SwipeView.RightItems>
<SwipeView.Content>
<Grid
BackgroundColor="{StaticResource BackgroundColor}"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Text="Default Threshold Behavior"
Style="{StaticResource TitleStyle}"/>
<Label
Grid.Row="1"
Text="Swipe to Left"
Style="{StaticResource SubTitleStyle}"/>
</Grid>
</SwipeView.Content>
</SwipeView>
<Label
Text="Custom Threshold (only one SwipeItem using Execute Mode)"/>
<Slider
x:Name="ThresholdExecuteSlider"
Maximum="300"
Minimum="50"
Value="80"
MaximumTrackColor="Gray"
MinimumTrackColor="{StaticResource BackgroundColor}"
ThumbColor="{StaticResource BackgroundColor}"
ValueChanged="OnThresholdExecuteSliderChanged"/>
<SwipeView
x:Name="ExecuteThresholdSwipeView"
Threshold="{Binding Source={x:Reference ThresholdExecuteSlider}, Path=Value}"
HeightRequest="80">
<SwipeView.RightItems>
<SwipeItems
Mode="Execute">
<SwipeItem
BackgroundColor="{StaticResource SwipeItemBackgroundColor}"
Icon="calculator.png"
Text="SwipeItem"/>
</SwipeItems>
</SwipeView.RightItems>
<SwipeView.Content>
<Grid
BackgroundColor="{StaticResource BackgroundColor}"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Text="Default Threshold Behavior"
Style="{StaticResource TitleStyle}"/>
<Label
Grid.Row="1"
Text="Swipe to Left"
Style="{StaticResource SubTitleStyle}"/>
</Grid>
</SwipeView.Content>
</SwipeView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
20 changes: 20 additions & 0 deletions ...in.Forms.Controls/GalleryPages/SwipeViewGalleries/HorizontalSwipeThresholdGallery.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
namespace Xamarin.Forms.Controls.GalleryPages.SwipeViewGalleries
{
public partial class HorizontalSwipeThresholdGallery : ContentPage
{
public HorizontalSwipeThresholdGallery()
{
InitializeComponent();
}

void OnThresholdRevealSliderChanged(object sender, ValueChangedEventArgs args)
{
RevealThresholdSwipeView.Close();
}

void OnThresholdExecuteSliderChanged(object sender, ValueChangedEventArgs args)
{
ExecuteThresholdSwipeView.Close();
}
}
}
133 changes: 133 additions & 0 deletions ....Forms.Controls/GalleryPages/SwipeViewGalleries/SwipeThresholdCustomSwipeItemGallery.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<?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="Xamarin.Forms.Controls.GalleryPages.SwipeViewGalleries.SwipeThresholdCustomSwipeItemGallery"
Title="Threshold with custom SwipeItem Gallery">
<ContentPage.Resources>
<ResourceDictionary>

<Color x:Key="BackgroundColor">#2E249E</Color>
<Color x:Key="SwipeItemBackgroundColor">#FE744D</Color>
<Color x:Key="TitleColor">#55A1FA</Color>
<Color x:Key="SubTitleColor">#FFFFFF</Color>

<Style x:Key="TitleStyle" TargetType="Label">
<Setter Property="FontSize" Value="10" />
<Setter Property="TextColor" Value="{StaticResource TitleColor}" />
<Setter Property="Margin" Value="6, 0, 6, 6" />
</Style>

<Style x:Key="SubTitleStyle" TargetType="Label">
<Setter Property="TextColor" Value="{StaticResource SubTitleColor}" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Margin" Value="6, 0, 6, 6" />
</Style>

<Style x:Key="SwipeItemTextStyle" TargetType="Label">
<Setter Property="TextColor" Value="White" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
</Style>

</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout
Padding="12">
<Label
Text="The Threshold property is only implemented for now on Android and iOS."
BackgroundColor="Black"
TextColor="White"/>
<SwipeView
HeightRequest="80">
<SwipeView.RightItems>
<SwipeItems
Mode="Reveal">
<SwipeItemView>
<Grid
WidthRequest="100">
<BoxView
BackgroundColor="{StaticResource SwipeItemBackgroundColor}"
CornerRadius="0, 6, 0, 6" />
<Label
Text="SwipeItem"
Style="{StaticResource SwipeItemTextStyle}"/>
</Grid>
</SwipeItemView>
</SwipeItems>
</SwipeView.RightItems>
<SwipeView.Content>
<Frame
BackgroundColor="{StaticResource BackgroundColor}"
CornerRadius="6"
HasShadow="False"
Padding="12">
<Grid
VerticalOptions="Center"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Text="Default Threshold"
Style="{StaticResource TitleStyle}"/>
<Label
Grid.Row="1"
Text="Swipe to the Left"
Style="{StaticResource SubTitleStyle}"/>
</Grid>
</Frame>
</SwipeView.Content>
</SwipeView>
<SwipeView
Threshold="90"
HeightRequest="80">
<SwipeView.RightItems>
<SwipeItems
Mode="Reveal">
<SwipeItemView>
<Grid
WidthRequest="100">
<BoxView
BackgroundColor="{StaticResource SwipeItemBackgroundColor}"
CornerRadius="0, 6, 0, 6" />
<Label
Text="SwipeItem"
Style="{StaticResource SwipeItemTextStyle}"/>
</Grid>
</SwipeItemView>
</SwipeItems>
</SwipeView.RightItems>
<SwipeView.Content>
<Frame
BackgroundColor="{StaticResource BackgroundColor}"
CornerRadius="6"
HasShadow="False"
Padding="12">
<Grid
VerticalOptions="Center"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Text="Custom Threshold (90)"
Style="{StaticResource TitleStyle}"/>
<Label
Grid.Row="1"
Text="Swipe to the Left"
Style="{StaticResource SubTitleStyle}"/>
</Grid>
</Frame>
</SwipeView.Content>
</SwipeView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
10 changes: 10 additions & 0 deletions ...rms.Controls/GalleryPages/SwipeViewGalleries/SwipeThresholdCustomSwipeItemGallery.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
namespace Xamarin.Forms.Controls.GalleryPages.SwipeViewGalleries
{
public partial class SwipeThresholdCustomSwipeItemGallery : ContentPage
{
public SwipeThresholdCustomSwipeItemGallery()
{
InitializeComponent();
}
}
}
19 changes: 19 additions & 0 deletions Xamarin.Forms.Controls/GalleryPages/SwipeViewGalleries/SwipeThresholdGallery.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
namespace Xamarin.Forms.Controls.GalleryPages.SwipeViewGalleries
{
public class SwipeThresholdGallery : ContentPage
{
public SwipeThresholdGallery()
{
Title = "SwipeThreshold Gallery";
Content = new StackLayout
{
Children =
{
GalleryBuilder.NavButton("Horizontal SwipeThreshold Gallery", () => new HorizontalSwipeThresholdGallery(), Navigation),
GalleryBuilder.NavButton("Vertical SwipeThreshold Gallery", () => new VerticalSwipeThresholdGallery(), Navigation),
GalleryBuilder.NavButton("SwipeThreshold with Custom SwipeItem Gallery", () => new SwipeThresholdCustomSwipeItemGallery(), Navigation),
}
};
}
}
}
1 change: 1 addition & 0 deletions Xamarin.Forms.Controls/GalleryPages/SwipeViewGalleries/SwipeViewGallery.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ public SwipeViewGallery()
Children =
{
GalleryBuilder.NavButton("Basic SwipeView Gallery", () => new BasicSwipeGallery(), Navigation),
GalleryBuilder.NavButton("SwipeView Threshold Gallery", () => new SwipeThresholdGallery(), Navigation),
GalleryBuilder.NavButton("SwipeView Events Gallery", () => new SwipeViewEventsGallery(), Navigation),
GalleryBuilder.NavButton("SwipeItems from Resource Gallery", () => new ResourceSwipeItemsGallery(), Navigation),
GalleryBuilder.NavButton("BindableLayout Gallery", () => new SwipeBindableLayoutGallery(), Navigation),
Expand Down
Loading

0 comments on commit 7050f89

Please sign in to comment.