Mini Kabibi Habibi
<local:CarouselDemoModule x:Class="CarouselDemo.VideoCatalog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxca="http://schemas.devexpress.com/winfx/2008/xaml/carousel"
xmlns:dxdb="http://schemas.devexpress.com/winfx/2008/xaml/demobase"
xmlns:local="clr-namespace:CarouselDemo"
xmlns:collection="clr-namespace:System.Collections;assembly=mscorlib"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:input="clr-namespace:System.Windows.Input;assembly=PresentationCore"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
>
<local:CarouselDemoModule.Resources>
<ResourceDictionary>
<LinearGradientBrush x:Key="sort-arrow-gradient" EndPoint="0.5,1.01" StartPoint="0.5,-0.01">
<GradientStop Color="#FFB1CFE2" Offset="0" />
<GradientStop Color="#FFDEF1F7" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-button-border-gradient" EndPoint="0.5,1.003" StartPoint="0.5,-0.003">
<GradientStop Color="#FF233B6C" Offset="0" />
<GradientStop Color="#FF5077B3" Offset="1" />
<GradientStop Color="#FF22417C" Offset="0.178" />
<GradientStop Color="#FF264B85" Offset="0.692" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-textedit-border-gradient" EndPoint="0.5,1.003" StartPoint="0.5,-0.003">
<GradientStop Color="#FF233B6C" Offset="0" />
<GradientStop Color="#FF5C84C1" Offset="1" />
<GradientStop Color="#FF5373AF" Offset="0.178" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-textedit-bg-gradient" EndPoint="0.5,1.003" StartPoint="0.5,-0.003" MappingMode="RelativeToBoundingBox">
<GradientStop Color="#FFCED6E6" Offset="0" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
<GradientStop Color="#FFECEFF5" Offset="0.264" />
<GradientStop Color="#FFE5E9F1" Offset="0.12" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-button-normal-glare" EndPoint="0.5,-0.002" StartPoint="0.5,1.002">
<GradientStop Color="#FF688CBF" Offset="0.862" />
<GradientStop Color="#FF46659D" Offset="1" />
<GradientStop Color="#FF517BBA" Offset="0" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-button-pressed-gradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF385FA1" Offset="0" />
<GradientStop Color="#FF6086BD" Offset="1" />
<GradientStop Color="#FF1F4685" Offset="0.529" />
<GradientStop Color="#FF4168A3" Offset="0.865" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-button-normal-gradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF274B87" Offset="0" />
<GradientStop Color="#FF7398CE" Offset="1" />
<GradientStop Color="#FF2F538F" Offset="0.529" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-button-pressed-glare" EndPoint="0.5,-0.002" StartPoint="0.5,1.002">
<GradientStop Color="#FF5F83B6" Offset="0.862" />
<GradientStop Color="#FF384E76" Offset="1" />
<GradientStop Color="#FF385E99" Offset="0" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-button-hottrack-gradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF385FA1" Offset="0" />
<GradientStop Color="#FFACCAF7" Offset="1" />
<GradientStop Color="#FF6F9CE0" Offset="0.529" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="editor-button-hottrack-glare" EndPoint="0.5,-0.002" StartPoint="0.5,1.002">
<GradientStop Color="#FFCEDBF1" Offset="0.865" />
<GradientStop Color="#FFDCEAF3" Offset="1" />
<GradientStop Color="#FF90AAD2" Offset="0" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="button-normal-gradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF578BC8" Offset="0" />
<GradientStop Color="#FFBDD7FF" Offset="1" />
<GradientStop Color="#FF88B1F0" Offset="0.529" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="button-normal-glare" EndPoint="0.5,-0.002" StartPoint="0.5,1.002">
<GradientStop Color="#FFD5E1F6" Offset="0.865" />
<GradientStop Color="#FFE7F2FA" Offset="1" />
<GradientStop Color="#FFAAC4EC" Offset="0" />
</LinearGradientBrush>
<Style x:Key="ButtonStyle4" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="13" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Timeline1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="hot" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Timeline2">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="hot" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height=".5*" />
<RowDefinition Height=".5*" />
</Grid.RowDefinitions>
<Border CornerRadius="12,3,3,12" Grid.RowSpan="2" Background="{StaticResource button-normal-gradient}" x:Name="border" />
<Border Margin="2,0,0,1" Grid.RowSpan="1" CornerRadius="12,3,5,5" Background="{StaticResource button-normal-glare}" x:Name="border1" />
<Border Margin="0,0,0,0" Grid.RowSpan="2" CornerRadius="8,8,8,8" Opacity="0" x:Name="hot">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.5,0.672">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.991" ScaleY="2.285" />
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5" />
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" />
<TranslateTransform X="0.001" Y="0.439" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFD0E5FF" Offset="0" />
<GradientStop Color="#00FFFFFF" Offset="1" />
<GradientStop Color="#DADCECFF" Offset="0.35" />
</RadialGradientBrush>
</Border.Background>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" Grid.RowSpan="2" Margin="0,0,0,0" x:Name="contentPresenter" />
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsPressed" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Timeline1}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Timeline2}" x:Name="Timeline2_BeginStoryboard" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="Timeline2_BeginStoryboard" />
</Trigger.ExitActions>
<Setter Property="Background" TargetName="border" Value="{StaticResource editor-button-pressed-gradient}" />
<Setter Property="Background" TargetName="border1" Value="{StaticResource editor-button-pressed-glare}" />
<Setter Property="Foreground" Value="#cee3fd" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border1">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,-0.002" StartPoint="0.5,1.002">
<GradientStop Color="#FFD5E1F6" Offset="0.865" />
<GradientStop Color="#FFE7F2FA" Offset="1" />
<GradientStop Color="#FFB8C2D0" Offset="0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFABB3BD" Offset="0" />
<GradientStop Color="#FFD7E5FB" Offset="1" />
<GradientStop Color="#FFA6B7D0" Offset="0.529" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Opacity" TargetName="contentPresenter" Value="0.35" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle5" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="13" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Timeline1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="hot" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Timeline2">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="hot" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Width="Auto" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height=".5*" />
<RowDefinition Height=".5*" />
</Grid.RowDefinitions>
<Border CornerRadius="3,12,12,3" Grid.RowSpan="2" Background="{StaticResource button-normal-gradient}" x:Name="border" />
<Border Margin="0,0,2,1" Grid.RowSpan="1" CornerRadius="3,12,5,5" Background="{StaticResource button-normal-glare}" x:Name="border1" />
<Border Margin="0,0,0,0" Grid.RowSpan="2" CornerRadius="8,8,8,8" Opacity="0" x:Name="hot">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.5,0.672">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.991" ScaleY="2.285" />
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5" />
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5" />
<TranslateTransform X="0.001" Y="0.439" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFD0E5FF" Offset="0" />
<GradientStop Color="#00FFFFFF" Offset="1" />
<GradientStop Color="#DADCECFF" Offset="0.35" />
</RadialGradientBrush>
</Border.Background>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" Grid.RowSpan="2" Margin="0,0,0,0" x:Name="contentPresenter" />
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsPressed" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Timeline1}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Timeline2}" x:Name="Timeline2_BeginStoryboard" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="Timeline2_BeginStoryboard" />
</Trigger.ExitActions>
<Setter Property="Background" TargetName="border" Value="{StaticResource editor-button-pressed-gradient}" />
<Setter Property="Background" TargetName="border1" Value="{StaticResource editor-button-pressed-glare}" />
<Setter Property="Foreground" Value="#cee3fd" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border1">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,-0.002" StartPoint="0.5,1.002">
<GradientStop Color="#FFD5E1F6" Offset="0.865" />
<GradientStop Color="#FFE7F2FA" Offset="1" />
<GradientStop Color="#FFB8C2D0" Offset="0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Background" TargetName="border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFABB3BD" Offset="0" />
<GradientStop Color="#FFD7E5FB" Offset="1" />
<GradientStop Color="#FFA6B7D0" Offset="0.529" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Opacity" TargetName="contentPresenter" Value="0.35" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="imageControlTemplate">
<Grid HorizontalAlignment="Left" VerticalAlignment="{Binding VerticalContentAlignment}" SnapsToDevicePixels="True">
<Border CornerRadius="3,3,3,3" Width="70" Height="70" Padding="3,3,3,3">
<Border.Background>
<LinearGradientBrush EndPoint="0.371,0.017" StartPoint="0.629,0.983">
<GradientStop Color="#FFAFD2FE" Offset="0" />
<GradientStop Color="#FF99B9E2" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<dx:TransferControl SpeedRatio="3" Style="{DynamicResource TransferControl_FadeStyle}" Content="{Binding Path=Source, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}">
<dx:TransferControl.ContentTemplate>
<DataTemplate>
<Image SnapsToDevicePixels="True" LayoutTransform="{Binding Path=ImageLayoutTransform, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}"
Source="{Binding}"
Stretch="{Binding Path=Stretch, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}"
StretchDirection="{Binding Path=StretchDirection, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}" />
</DataTemplate>
</dx:TransferControl.ContentTemplate>
</dx:TransferControl>
</Border>
</Grid>
</ControlTemplate>
</ResourceDictionary>
</local:CarouselDemoModule.Resources>
<dxdb:DemoModuleControl>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="110" />
</Grid.RowDefinitions>
<Border Padding="10">
<Grid>
<MediaElement Name="mediaElement"
Source="{Binding ElementName=carousel, Path=ActiveItem.(local:VideoCatalog.MediaPath)}"
Stretch="Uniform"
LoadedBehavior="Manual"
/>
<dxdb:ImageControl Margin="30,30,30,30" MouseDown="splashImage_MouseDown" Name="splashImage" Stretch="Uniform" Source="{Binding ElementName=carousel, Path=ActiveItem.Source}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</Border>
<Border HorizontalAlignment="Center" Grid.Row="1" CornerRadius="45" Height="85" Margin="0,0,0,16">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF052453" Offset="0" />
<GradientStop Color="#FF264372" Offset="1" />
<GradientStop Color="#FF092C62" Offset="0.653" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Height="Auto" Margin="8" Name="navigator_horizontal_Copy1" Orientation="Horizontal">
<Button Height="25"
Margin="24,1,0,0"
Style="{StaticResource ButtonStyle4}"
Width="45"
Command="dxca:CarouselPanel.Previous"
CommandTarget="{Binding ElementName=carousel}"
>
<Grid Height="9" Width="19">
<Path x:Name="Path_Copy12" Stretch="Fill" Data="F1 M 588,565L 580,569L 580,570L 588,574L 588,565 Z " Margin="0,0,1,0" Width="8" Height="9">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF041C43" Offset="0" />
<GradientStop Color="#FF1B4FA3" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</Button>
<dxca:CarouselPanel MouseDown="carousel_MouseDown"
x:Name="carousel"
AnimationTime="300"
AttractorPointIndex="3"
ClipToBounds="True"
PathPadding="-20,0,-20,0"
PathVisible="False"
ItemSize="100,100"
Width="300"
IsRepeat="False"
>
<dxca:CarouselPanel.Resources>
<Style TargetType="{x:Type dxdb:ImageControl}" BasedOn="{StaticResource {x:Type dxdb:ImageControl}}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
<Setter Property="Stretch" Value="Uniform" />
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="{Binding Path=(dxca:CarouselPanel.Parameters).Scale, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}"
ScaleY="{Binding Path=(dxca:CarouselPanel.Parameters).Scale, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}"
/>
<TranslateTransform X="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetX, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}"
Y="{Binding Path=(dxca:CarouselPanel.Parameters).OffsetY, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxdb:ImageControl}}}"
/>
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
</dxca:CarouselPanel.Resources>
<dxca:CarouselPanel.ParameterSet>
<dxca:ParameterCollection>
<dxca:Parameter Name="Scale">
<dxca:Parameter.DistributionFunction>
<dxca:PieceLinearFunction>
<dxca:PieceLinearFunction.Points>
<dxca:PointCollection>
<Point X="0" Y="0" />
<Point X="0.25" Y="0.5" />
<Point X="0.5" Y="1" />
<Point X="0.75" Y="0.5" />
<Point X="1" Y="0" />
</dxca:PointCollection>
</dxca:PieceLinearFunction.Points>
</dxca:PieceLinearFunction>
</dxca:Parameter.DistributionFunction>
</dxca:Parameter>
</dxca:ParameterCollection>
</dxca:CarouselPanel.ParameterSet>
<dxca:CarouselPanel.PointPathFunction>
<dxca:PieceLinearFunction>
<dxca:PieceLinearFunction.Points>
<dxca:PointCollection>
<Point X="0" Y="0" />
<Point X="220" Y="0" />
<Point X="335" Y="0" />
<Point X="500" Y="0" />
<Point X="665" Y="0" />
<Point X="780" Y="0" />
<Point X="1000" Y="0" />
</dxca:PointCollection>
</dxca:PieceLinearFunction.Points>
</dxca:PieceLinearFunction>
</dxca:CarouselPanel.PointPathFunction>
</dxca:CarouselPanel>
<Button Command="dxca:CarouselPanel.Next"
CommandTarget="{Binding ElementName=carousel}"
Height="25"
Margin="0,1,24,0" Style="{StaticResource ButtonStyle5}" Width="45"
>
<Grid Height="9" Width="19">
<Path x:Name="Path_Copy13" Stretch="Fill" Data="F1 M 590,589L 598,585L 598,584L 590,580L 590,589 Z " Width="8" Height="9" Margin="1,0,0,0">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF041C43" Offset="0" />
<GradientStop Color="#FF1B4FA3" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</Button>
</StackPanel>
</Border>
</Grid>
</dxdb:DemoModuleControl>
</local:CarouselDemoModule>