WPF Canvasに描いた線だけを消す方法が分かりません。

Question

キャンバスに等間隔に線を引きグリッドの様に背景に表示させておこうとしています。
キャンバスサイズも変更させたいのでサイズを変更する時にグリッドを再描画させています。
しかし再描画する際に線だけを消す方法が分からず線以外の子要素も消えてしまいます。

MainWindow.xaml

    <Grid>
        <ScrollViewer HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" Margin="0,0,0,235">
            <Canvas Name="gridCanvas" Background="#FF444444" Width="500" Height="70" SnapsToDevicePixels="True" HorizontalAlignment="Left" Margin="0,0,0,249">
                <Thumb Canvas.Top ="5" Canvas.Left="5" Width="30" Height="30" Name="thmub" />
                <StackPanel Canvas.Top="5" Canvas.Left="40" Width="30" Height="30" Background="#FFE66262"/>
            </Canvas>
        </ScrollViewer>
        <Slider Name="slider" HorizontalAlignment="Left" Margin="10,105,0,0" VerticalAlignment="Top" Width="490" ValueChanged="Slider_ValueChanged"/>
    </Grid>

キャンバスには色付けしたThumbとStackPanelを配置してあります。
スライダーでキャンバスサイズを変更します。

MainWindow.xaml.cs

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            CreateGridView(500);
        }

        //スライダー変更でキャンバスのサイズ変更
        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            int width = 500 + (int)slider.Value * 5;
            gridCanvas.Width = width;
            //グリッドの再描画
            CreateGridView(width);
        }

        //グリッドの描画
        private void CreateGridView(int gw)
        {
            //線だけ消す方法が分かりません。
            //ThumbやStackPanelも線の上に表示させたいです。
            gridCanvas.Children.Clear();
            int GRID_SIZE_W = gw; //横上限
            int GRID_SIZE_H = 70; //縦上限
            int span_W = gw / 10; //横間隔
            int span_H = 70 / 3; //縦間隔

            //縦線
            for (int i = 0; i < GRID_SIZE_W; i += span_W)
            {
                gridCanvas.Children.Add(new Line()
                {
                    X1 = i,
                    Y1 = 0,
                    X2 = i,
                    Y2 = GRID_SIZE_H,
                    Stroke = Brushes.LightGray,
                    StrokeThickness = 2,
                });
            }
            
            //横線
            for (int i = 0; i < GRID_SIZE_H; i += span_H)
            {
                gridCanvas.Children.Add(new Line()
                {
                    X1 = 0,
                    Y1 = i,
                    X2 = GRID_SIZE_W,
                    Y2 = i,
                    Stroke = Brushes.LightGray,
                    StrokeThickness = 2,
                });
            }
        }
    }

gridCanvas.Children.Clear();で前に描画されたグリッドを全て消しているのですが、その際に子要素も消えてしまいます。
これを線だけを消すようにしたいのですが方法が分からないので教えてください。
あとChildre.Clear()で消さない場合もThumbとStackPanelが線の後ろ側に表示されるのも解決したいです。
線だけを別のキャンバスに描くような方法はあるのでしょうか？

よろしくお願いします。

Answer 1

参考までに、等間隔の線の描画は XAML だけでも可能です。
ミソは TileMode です。

<Canvas>
  <Canvas.Background>
    <VisualBrush TileMode="Tile"
                  Viewport="0,0,50,50"
                  ViewportUnits="Absolute">
      <VisualBrush.Visual>
        <Border BorderThickness="0,0,1,1"
                BorderBrush="Black"
                Width="50"
                Height="50" />
      </VisualBrush.Visual>
    </VisualBrush>
  </Canvas.Background>
</Canvas>

Comments

[gucha]

こちらの方法も意図している動作を確認しました。
教えて頂きありがとうございます。
線に細かく細工をしないのであればこちらの方が手軽で良さそうです。

Answer 2

これを線だけを消すようにしたいのですが方法が分からないので教えてください。

線(Line)だけを消す方法としては、gridCanvasのChildrenプロパティがUIElementCollectionクラスなので、そのクラスメソッドであるRemoveやRemoveAtを使うことで削除することができます。
UIElementCollection クラス

ですが、Lineのみを削除後、座標を再計算したLineを追加するとThumbとStackPanelの位置関係が意図したものにしづらいので、全削除 --> 再計算したLineを追加 --> 元のThumbとStackPanelを追加　との流れの方が良いでしょう。そうすることでご要望のかたちにはなります。

以下は、そのように直してみたClearGridView2です。差し替えて試してみてください。

        private void ClearGridView2(int gw)
        {
            //線だけ消す方法が分かりません。
            //ThumbやStackPanelも線の上に表示させたいです。
            //            gridCanvas.Children.Clear();

            int GRID_SIZE_W = gw; //横上限
            int GRID_SIZE_H = 70; //縦上限
            int span_W = gw / 10; //横間隔
            int span_H = 70 / 3; //縦間隔

            List<UIElement> keepElems = new List<UIElement>();
            foreach (UIElement elem in gridCanvas.Children)
            {
                // UIElementがLineかどうか判定
                if (elem.GetType() == typeof(Line))
                {
                    ; // Line
                }
                else
                {
                    // Line以外を保存(ThumbとStackPanel)
                    keepElems.Add(elem);
                }
            }

            // いったん全部クリア
            gridCanvas.Children.Clear();

            //縦線
            for (int i = 0; i < GRID_SIZE_W; i += span_W)
            {
                gridCanvas.Children.Add(new Line()
                {
                    X1 = i,
                    Y1 = 0,
                    X2 = i,
                    Y2 = GRID_SIZE_H,
                    Stroke = Brushes.LightGray,
                    StrokeThickness = 2,
                });
            }

            //横線
            for (int i = 0; i < GRID_SIZE_H; i += span_H)
            {
                gridCanvas.Children.Add(new Line()
                {
                    X1 = 0,
                    Y1 = i,
                    X2 = GRID_SIZE_W,
                    Y2 = i,
                    Stroke = Brushes.LightGray,
                    StrokeThickness = 2,
                });
            }

            // ThumbとStackPanelを追加
            foreach (UIElement elem in keepElems)
            {
                gridCanvas.Children.Add(elem);
            }
        }
    }

ご質問の直接の回答としては以上ですが、質問者さんが本当にやりたいことへの解法としては、この方法よりは先の回答者さんの「Canvasを2つ使う」方法に賛同します。

Comments

[gucha]

新しいリストへ格納しておく方法があったのですね！
ご指摘の通りCanvasを2つ使う方法を今回は採用させて頂きましたが、この方法も勉強になりました。
複数の方法を教えて頂きありがとうございました。

Answer 3

追加したLINEを別のところで保持しておいて、それを消しに行くとか言う方法もあるけど、
Canvasを複数用意するのが簡単じゃないかな。

<ScrollViewer>
   <Canvas Name="gridCanvas"/>
   <Canvas Name="gridCanvas2"/>
</ScrollViewer>

Comments

[gucha]

xamlに記述したところ
プロパティContentは1回しか設定できません。
とエラーが出ました･･･｡

[dodox86]

以下のように、ScrollViewerのContentひとつのCanvasにしてしまって、その中で２つ持たせれば良いです。
<ScrollViewer>
　<Canvas Name”parentCanvas”>
<Canvas Name="gridCanvas"/>
<Canvas Name="gridCanvas2"/>
</Canvas>
</ScrollViewer>

[gucha]

dodox86さん
コードをxamlに書いた時点では同じように警告が出ていましたが無視して開始したところエラーは消えました。
動作も期待通りの結果が得られましたのでこちらをベストアンサーとさせて頂きます。
お二人ともありがとうございました。