지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > C#.Net 튜토리얼 > WPF에서 아름다운 선택 윤곽 특수 효과를 구현한 예

WPF에서 아름다운 선택 윤곽 특수 효과를 구현한 예

零下一度
풀어 주다： 2017-06-17 17:35:14
원래의
3975명이 탐색했습니다.

이 글은 주로 WPF의 간단한 마키 효과를 소개하며, 관심 있는 친구들은 참고할 수 있습니다.

마키 효과는 최근 프로젝트에서 사용되었으며 온라인 마키 효과와 그다지 유사하지 않습니다. 문제는 대부분의 인터넷이 연속적이지만 우리에게 필요한 것은 불연속적이라는 것입니다.

즉, 인터페이스에는 4개의 항목이 표시됩니다(표시되는 항목 수는 가변적임). 표시할 항목이 7개 있으면 4개의 공간에서 계속 왼쪽으로 이동합니다. 물론 연결 효과는 없습니다. 매우 좋은.

그러면 더 이상 표시되지 않는 콘텐츠를 제거하려면 클릭을 지원해야 합니다.

효과는 다음과 같습니다.

아이디어는 대략 다음과 같습니다.

1 가장 바깥쪽 레이어에 ViewBox를 사용하여 이 컨트롤이 호출되는 위치를 채워 자동으로 늘어납니다

코드 복사 코드는 다음과 같습니다.

<Viewbox x:Name="viewbox_main" Height="{Binding Path=ActualHeight}" Width="{Binding Path=ActualWidth}" MouseLeave="grid_main_MouseLeave" MouseMove="grid_main_MouseMove"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill"/>
로그인 후 복사

2. 세 개의 변수를 정의합니다. 하나는 표시할 UserControl 수를 설정하는 데 사용되는 값입니다. 예를 들어 기본값은 그림과 같이 4입니다. 물론, 5로 설정되면 5가 됩니다. 하나의 List는 표시 컨트롤 목록을 넣는 데 사용되고 List은 사용할 모든 컨트롤을 넣는 데 사용됩니다. 천막.

3. 캔버스를 설정하고 선택 윤곽에 사용하기 위해 가장 바깥쪽 Viewbox에 넣습니다(이것은 일반적으로 사용되는 선택 윤곽 제어 캔버스이기도 함) 

//给Canvas设置一些属性
 canvas_board.VerticalAlignment = VerticalAlignment.Stretch;
 canvas_board.HorizontalAlignment = HorizontalAlignment.Stretch;
canvas_board.Width = this.viewbox_main.ActualWidth;
canvas_board.Height = this.viewbox_main.ActualHeight;
canvas_board.ClipToBounds = true;
//用viewbox可以支持拉伸
this.viewbox_main.Child = canvas_board;
로그인 후 복사

4. 그리드 수를 캔버스에 넣습니다. 여기에 표시된 숫자보다 큰 숫자, 즉 Count+1 값이 있습니다. 왜냐하면 스크롤할 때 실제로 순환을 보장하는 가장 바깥쪽에 하나가 있기 때문입니다. 두 컨트롤 사이의 여백은 그리드를 설정해야 합니다. 그러면 컨트롤이 그리드


//循环将Grid加入到要展示的列表里
for (int i = 0; i < Uc_Count + 1; i++)
{
 Grid grid = new Grid();
 grid.Width = canvas_board.Width / Uc_Count - 10;
 grid.Height = canvas_board.Height - 10;
 grid.Margin = new Thickness(5);
 this.canvas_board.Children.Add(grid);
 grid.SetValue(Canvas.TopProperty, 0.0);
 grid.SetValue(Canvas.LeftProperty, i * (grid.Width + 10));

 UcListForShow.Add(grid);
}
로그인 후 복사

5에 직접 추가됩니다. the left


for (int i = 0; i < UcListForShow.Count; i++)
{
 //设置滚动时候的效果
 DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames();
 LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));
 LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - 1) * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)));
 daukf_uc.KeyFrames.Add(k1_uc);
 daukf_uc.KeyFrames.Add(k2_uc);
 storyboard_imgs.Children.Add(daukf_uc);
 Storyboard.SetTarget(daukf_uc, UcListForShow[i]);
 Storyboard.SetTargetProperty(daukf_uc, new PropertyPath("(Canvas.Left)"));
}
로그인 후 복사

6. 스크롤할 때 UserControl이 어떤 Grid에 추가되는지, 즉 어떤 컨트롤이 첫 번째인지 계산해야 합니다.

인덱스 값을 scroll_index로 설정합니다. 기본적으로 초기 상태인 scroll_index=0으로 스크롤 후, scroll_index = scroll_index + 1 - Uc_Count;

그런 다음 루프 시 표시 목록인지 여부를 판단합니다. 나머지) 


scroll_index = scroll_index + 1 - Uc_Count;

for (int i = 0; i < UcListForShow.Count; i++)
{
 UcListForShow[i].SetValue(Canvas.LeftProperty, i * (UcListForShow[i].Width + 10));
 UserControl uc;
 if (i == UcListForShow.Count - 1)
 {
  uc = UcListSum[scroll_index % UcListSum.Count];
 }
 else
 {
  uc = UcListSum[scroll_index++ % UcListSum.Count];
 }
 if (uc.Parent != null)
 {
  (uc.Parent as Grid).Children.Clear();//将Usercontrol从原来的里面移除掉，要不然会抛错，Usercontrol已属于另一个控件
 }
 UcListForShow[i].Children.Clear();
 UcListForShow[i].Children.Add(uc);
 //将隐藏按钮加入到Grid里
 Button btn = new Button();
 btn.Style = (dictionary["hidenStyle"] as Style);//从样式文件里读取到Button的样式
 btn.Tag = UcListForShow[i].Children;//给Tag赋值，这样方便查找
 btn.Click += Btn_Click;//注册隐藏事件
 UcListForShow[i].Children.Add(btn);
}
로그인 후 복사

코드에서 (uc.Parent as Grid).Children.Clear()에 주의해야 합니다. 제거하지 않으면 이미 다른 항목에 속해 있다는 메시지가 표시됩니다. 따라서 부모부터 시작해야 합니다.

7. 버튼을 클릭하면 숨겨져야 합니다. 실제로는 전체에서 더 이상 표시되지 않는 항목을 빼는 것입니다. 


private void Btn_Click(object sender, RoutedEventArgs e)
{
 if ((sender as Button).Tag != null)
 {
  UcListSum.Remove((((sender as Button).Tag as UIElementCollection)[0] as UserControl));
 }
 if (UcListSum.Count == Uc_Count)//当列表数和要展示的数目相同的时候，就停止掉动画效果
 {
  storyboard_imgs.Completed -= Storyboard_imgs_Completed;
  storyboard_imgs.Stop();
  for (int i = 0; i < Uc_Count; i++)
  {
   UcListForShow[i].Children.Clear();
   if (UcListSum[i].Parent != null)
   {
    (UcListSum[i].Parent as Grid).Children.Clear();
   }
   UcListForShow[i].Children.Add(UcListSum[i]);
  }
  return;
 }
}
로그인 후 복사

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace MarqueeUserControl
{
 /// <summary>
 /// MarqueeUC.xaml 的交互逻辑
 /// </summary>
 public partial class MarqueeUC : UserControl
 {
  ResourceDictionary dictionary;
  public MarqueeUC()
  {
   InitializeComponent();
   //读取样式文件
   dictionary = new ResourceDictionary { Source = new Uri("/MarqueeUserControl;component/MarqueeUserControlDictionary.xaml", UriKind.Relative) };
  }
  #region 属性
  private int _uc_Count = 0;
  /// <summary>
  /// 用来展示几个
  /// </summary>
  public int Uc_Count
  {
   get
   {
    return _uc_Count;
   }

   set
   {
    _uc_Count = value;
   }
  }

  private List<Grid> _ucListForShow = new List<Grid>();
  /// <summary>
  /// 用来展示的控件列表
  /// </summary>
  private List<Grid> UcListForShow
  {
   get
   {
    return _ucListForShow;
   }

   set
   {
    _ucListForShow = value;
   }
  }

  private List<UserControl> _ucListSum = new List<UserControl>();
  /// <summary>
  /// 要添加的控件的列表
  /// </summary>
  public List<UserControl> UcListSum
  {
   get
   {
    return _ucListSum;
   }

   set
   {
    _ucListSum = value;
   }
  }

  #endregion
  Canvas canvas_board = new Canvas();
  Storyboard storyboard_imgs = new Storyboard();
  int scroll_index = 0;//滚动索引
  double scroll_width;//滚动宽度

  void GridLayout()
  {
   if (Uc_Count == 0)//如果这个值没有赋值的话，则默认显示四个
   {
    Uc_Count = 4;
   }
   //给Canvas设置一些属性
   canvas_board.VerticalAlignment = VerticalAlignment.Stretch;
   canvas_board.HorizontalAlignment = HorizontalAlignment.Stretch;
   canvas_board.Width = this.viewbox_main.ActualWidth;
   canvas_board.Height = this.viewbox_main.ActualHeight;
   canvas_board.ClipToBounds = true;
   //用viewbox可以支持拉伸
   this.viewbox_main.Child = canvas_board;
   //循环将Grid加入到要展示的列表里
   for (int i = 0; i < Uc_Count + 1; i++)
   {
    Grid grid = new Grid();
    grid.Width = canvas_board.Width / Uc_Count - 10;
    grid.Height = canvas_board.Height - 10;
    grid.Margin = new Thickness(5);
    this.canvas_board.Children.Add(grid);
    grid.SetValue(Canvas.TopProperty, 0.0);
    grid.SetValue(Canvas.LeftProperty, i * (grid.Width + 10));

    UcListForShow.Add(grid);
   }
  }

  void StoryLoad()
  {
   for (int i = 0; i < UcListForShow.Count; i++)
   {//设置滚动时候的效果
    DoubleAnimationUsingKeyFrames daukf_uc = new DoubleAnimationUsingKeyFrames();
    LinearDoubleKeyFrame k1_uc = new LinearDoubleKeyFrame(i * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));
    LinearDoubleKeyFrame k2_uc = new LinearDoubleKeyFrame((i - 1) * (UcListForShow[i].Width + 10), KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)));
    daukf_uc.KeyFrames.Add(k1_uc);
    daukf_uc.KeyFrames.Add(k2_uc);
    storyboard_imgs.Children.Add(daukf_uc);
    Storyboard.SetTarget(daukf_uc, UcListForShow[i]);
    Storyboard.SetTargetProperty(daukf_uc, new PropertyPath("(Canvas.Left)"));
   }

   storyboard_imgs.FillBehavior = FillBehavior.Stop;
   storyboard_imgs.Completed += Storyboard_imgs_Completed;
   storyboard_imgs.Begin();
  }

  private void Storyboard_imgs_Completed(object sender, EventArgs e)
  {

   scroll_index = scroll_index + 1 - Uc_Count;

   for (int i = 0; i < UcListForShow.Count; i++)
   {
    UcListForShow[i].SetValue(Canvas.LeftProperty, i * (UcListForShow[i].Width + 10));
    UserControl uc;
    if (i == UcListForShow.Count - 1)
    {
     uc = UcListSum[scroll_index % UcListSum.Count];
    }
    else
    {
     uc = UcListSum[scroll_index++ % UcListSum.Count];
    }
    if (uc.Parent != null)
    {
     (uc.Parent as Grid).Children.Clear();//将Usercontrol从原来的里面移除掉，要不然会抛错，Usercontrol已属于另一个控件
    }
    UcListForShow[i].Children.Clear();
    UcListForShow[i].Children.Add(uc);
    //将隐藏按钮加入到Grid里
    Button btn = new Button();
    btn.Style = (dictionary["hidenStyle"] as Style);//从样式文件里读取到Button的样式
    btn.Tag = UcListForShow[i].Children;//给Tag赋值，这样方便查找
    btn.Click += Btn_Click;//注册隐藏事件
    UcListForShow[i].Children.Add(btn);
   }

   storyboard_imgs.Begin();
  }

  private void Btn_Click(object sender, RoutedEventArgs e)
  {
   if ((sender as Button).Tag != null)
   {
    UcListSum.Remove((((sender as Button).Tag as UIElementCollection)[0] as UserControl));
   }
   if (UcListSum.Count == Uc_Count)//当列表数和要展示的数目相同的时候，就停止掉动画效果
   {
    storyboard_imgs.Completed -= Storyboard_imgs_Completed;
    storyboard_imgs.Stop();
    for (int i = 0; i < Uc_Count; i++)
    {
     UcListForShow[i].Children.Clear();
     if (UcListSum[i].Parent != null)
     {
      (UcListSum[i].Parent as Grid).Children.Clear();
     }
     UcListForShow[i].Children.Add(UcListSum[i]);
    }
    return;
   }
  }

  public void StartMar()
  {
   GridLayout();

   scroll_width = this.canvas_board.Width;

   for (int i = 0; i < UcListForShow.Count; i++)
   {
    UserControl uc;
    if (i == UcListForShow.Count - 1)
    {
     uc = UcListSum[scroll_index % UcListSum.Count];
    }
    else
    {
     uc = UcListSum[scroll_index++ % UcListSum.Count];
    }
    if (uc.Parent != null)
    {
     (uc.Parent as Grid).Children.Clear();
    }
    UcListForShow[i].Children.Clear();
    UcListForShow[i].Children.Add(uc);
   }
   StoryLoad();
  }

  private void grid_main_MouseLeave(object sender, MouseEventArgs e)
  {
   if (storyboard_imgs.GetCurrentState() == ClockState.Stopped)//如果是停止的状态，则直接返回，不再起作用
   {
    return;
   }
   if (storyboard_imgs.GetIsPaused() == true)//如果是暂停状态的话，则开始
   {
    storyboard_imgs.Begin();
   }
  }

  private void grid_main_MouseMove(object sender, MouseEventArgs e)
  {
   if (storyboard_imgs.GetIsPaused() == false)
   {
    storyboard_imgs.Pause();
   }
  }
 }
}
로그인 후 복사

해결되지 않은 문제


마우스가 호버링할 때 표시하고 제거할 때 숨길 수 있는 버튼을 추가하고 싶은데 그 이유는 마우스 오버 시 작동하지 않는다는 것입니다.

Visibility 값이 변경되었지만 다음 번까지 Button 값이 첨부되지 않습니다. 현재로서는 이미 MouseLeave를 표시하고 숨기는 방법을 안내해 주실 수 있나요?

위 내용은 WPF에서 아름다운 선택 윤곽 특수 효과를 구현한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
实例 实现 特效
원천：php.cn
이전 기사：ASP 등록 코드의 예 공유 다음 기사：C#에서 FTP 이미지 업로드 기능을 구현하는 방법에 대한 그래픽 및 텍스트 코드 공유(필독)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
9
1588
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
그리드를 사용하여 특정 디자인 만들기: 단계별 가이드 이 이미지와 유사한 레이아웃을 만들려고 합니다. 이 그리드를 사용해 보았지만 그렇게 할 수 없습니다. <ulclass="container"...
에서 2024-04-06 20:29:08
0
2
492
3단계 계층구조의 맞춤 분류를 사용하여 우커머스 관련 상품을 선택하세요. 나는 "스포츠"라는 사용자 정의 분류를 가진 wooCommerce 상점을 가지고 있습니다. 분류에는 부모, 어린이, 어린이의 세 가지 수준이 있...
에서 2024-04-06 20:05:30
0
1
544
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿