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. 3 つの変数を定義します。1 つは表示される UserControl の数を設定するために使用されます。たとえば、デフォルトは 4 です。もちろん、これが 5 に設定されている場合は 5 になります。1 つの List は表示コントロールのリストを配置するために使用され、List は使用されるすべてのコントロールを配置します。マーキー。

3. マーキーで使用するためにキャンバスを設定し、最も外側の Viewbox に配置します (これも一般的に使用されるマーキー コントロールの Canvas)

//给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. キャンバスにループするグリッドを配置します。ここでは、表示されている数値よりも 1 大きい値、つまり Count+1 の値が表示されます。これは、スクロールするときに実際には最も外側に 1 つあり、循環が確保されるためです。 2 つのコントロール間のマージンについては、グリッドを設定する必要があります。その後、コントロールが各グリッドに直接スローされます。これは、移動の効果です。左

//循环将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);
}

6. スクロールするとき、UserControl がどの Grid に追加されるか、つまりどのコントロールが最初であるかを計算する必要があります。

インデックス値scroll_indexを設定します。デフォルトでは初期状態であるscroll_index=0です。スクロール後、scroll_index =scroll_index + 1 - Uc_Count;

その後、ループ時に表示リストかどうかを判断します。残り)

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)"));
}

コードでは、(uc.Parent as Grid).Children.Clear() に注意する必要があります。これを削除しないと、既に別のものに属しているというメッセージが表示されます。したがって、削除された親から開始する必要があります。

7. ボタンの非表示イベント。実際には、表示されなくなった項目を合計から減算することを意味します:

。

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);
}

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;
 }
}

未解決の問題

マウスをホバーしているときに表示し、マウスを離したときに非表示にするボタンを追加したいのですが、原因はマウスオーバーのときに機能しないことがわかりました。
Visibility

の値は変更されましたが、この時点ではすでに MouseLeave になっています。どなたかこれを表示および非表示にする方法を教えてください。

以上がWPF で美しいマーキー特殊効果を実装する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。