Win10 UI入门 SliderRectangle

看了@段博琼大哥导航滑动的思路,自己又做了一个类似与黄油相机里面的一个功能

Win10 UI入门 SliderRectangle

                <Grid x:Name="SliderGrid" Grid.ColumnSpan="" Grid.Row="">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="LeftContentPresenter"
HorizontalAlignment="Center" Tapped="LeftContentPresenter_Tapped"
VerticalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="" FontSize="" Margin="0,0,0,10"/>
<Rectangle x:Name="LeftRectStateName" Fill="Red" Height=""
HorizontalAlignment="Stretch" Grid.Row="">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</ContentPresenter>
<ContentPresenter x:Name="RightContentPresenter"
Grid.Column=""
Tapped="RightContentPresenter_Tapped"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="" FontSize="" Margin="0,0,0,10"/>
<Rectangle x:Name="RightRectStateName" Fill="Red" Height="" Opacity=""
HorizontalAlignment="Stretch" Grid.Row="">
<Rectangle.RenderTransform>
<CompositeTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</ContentPresenter>
</Grid>
        private Rectangle rect_old; // 上一次选中的 Rectangle
private Rectangle rect_current;// 当前选中的 Rectangle
private Storyboard tempStoryboard;
private void RightContentPresenter_Tapped(object sender, TappedRoutedEventArgs e)
{
rect_current = VisualTreeUtil.FindChildOfType<Rectangle>(RightContentPresenter) as Rectangle;
rect_old = VisualTreeUtil.FindChildOfType<Rectangle>(LeftContentPresenter) as Rectangle; var new_rect = ElementUtil.GetBounds(rect_current, SliderGrid);
var old_rect = ElementUtil.GetBounds(rect_old, SliderGrid);
tempStoryboard = StoryBordImg(old_rect, new_rect, LeftContentPresenter, RightContentPresenter); tempStoryboard.Completed += (s1, e1) =>
{
RightContentPresenter.IsHitTestVisible = false;
LeftContentPresenter.IsHitTestVisible = true;
rect_current.Opacity = ;
rect_old.Opacity = ;
tempStoryboard.Stop(); WYToastDialog dialog = new WYToastDialog();
dialog.ShowAsync("");
};
}
private void LeftContentPresenter_Tapped(object sender, TappedRoutedEventArgs e)
{
rect_current = VisualTreeUtil.FindChildOfType<Rectangle>(LeftContentPresenter) as Rectangle;
rect_old= VisualTreeUtil.FindChildOfType<Rectangle>(RightContentPresenter) as Rectangle; var new_rect = ElementUtil.GetBounds(rect_current, SliderGrid);
var old_rect = ElementUtil.GetBounds(rect_old, SliderGrid);
tempStoryboard = StoryBordImg(old_rect, new_rect, RightContentPresenter, LeftContentPresenter); tempStoryboard.Completed += (s1, e1) =>
{
LeftContentPresenter.IsHitTestVisible = false;
RightContentPresenter.IsHitTestVisible = true;
rect_current.Opacity = ;
rect_old.Opacity = ;
tempStoryboard.Stop(); WYToastDialog dialog = new WYToastDialog();
dialog.ShowAsync("");
};
} private Storyboard StoryBordImg(Rect oldR,Rect newR,ContentPresenter oldP,ContentPresenter newP)
{
var sb = new Storyboard();
if (rect_old != null && rect_current != null)
{
var anim = new DoubleAnimationUsingKeyFrames();
Storyboard.SetTarget(anim, rect_old);
Storyboard.SetTargetProperty(anim, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)"); EasingDoubleKeyFrame KeyFrame = new EasingDoubleKeyFrame();
KeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds());
KeyFrame.Value = ; EasingDoubleKeyFrame KeyFrame2 = new EasingDoubleKeyFrame();
KeyFrame2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds());
KeyFrame2.Value = ; QuarticEase easing = new QuarticEase();
easing.EasingMode = EasingMode.EaseOut;
easing.Ease(0.3);
KeyFrame2.EasingFunction = easing; anim.KeyFrames.Add(KeyFrame);
anim.KeyFrames.Add(KeyFrame2);
anim.KeyFrames[].Value = newR.X - oldR.X; var anim2 = new DoubleAnimation();
anim2.To = rect_current.ActualWidth / oldR.Width;
System.Diagnostics.Debug.WriteLine("x :" + rect_current.ActualWidth / rect_old.ActualWidth);
anim2.Duration = TimeSpan.FromMilliseconds();
Storyboard.SetTarget(anim2, rect_old);
Storyboard.SetTargetProperty(anim2, "(UIElement.RenderTransform).(CompositeTransform.ScaleX)"); sb.Children.Add(anim);
sb.Children.Add(anim2);
sb.Begin();
}
return sb;
}

本文可以封装城一个独立的控件使用在自己的项目中

欢迎大家访问我的个人博客:https://androllen.github.io/

https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/ee230084

https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/ee330302

https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/system.windows.visualstategroup.transitions

上一篇:Java基础005 --- 安全管理器、可变参数等


下一篇:爬虫协议robots