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

이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!