none
Gridに罫線を引く際に、Borderの細かい指定をしなくてもよい方法について RRS feed

  • 質問

  • Gridに罫線を引く方法で、もう少し簡単にする方法がないか調査しております。

    ご存じの方がいれば、教えていただきたいです。

    やりたいこと

     Gridを4分割して、田の字に罫線を引いて、表形式で表示したいです。

     この際に、Gridの罫線の太さを均一(1)にしたいので、各BorderのChicknessの値を、

     セルごとに重複しないように考えて、設定していく必要があります。

     このようなことを行いたい場合、やはり1つ1つ計算して、BorderのChicknessの値をセットしないといけないのでしょうか?

    <XAML>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="71*" />
                <RowDefinition Height="83*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="148*" />
                <ColumnDefinition Width="163*" />
            </Grid.ColumnDefinitions>
            <Border BorderBrush="Silver" BorderThickness="1" Name="border1" />
            <Border BorderBrush="Silver" BorderThickness="0,1,1,1" Name="border2" Grid.Column="1" />
            <Border BorderBrush="Silver" BorderThickness="1,0,1,1" Grid.Row="1" Name="border3" />
            <Border BorderBrush="Silver" BorderThickness="0,0,1,1" Grid.Column="1" Grid.Row="1" Name="border4" />
        </Grid>


              


    • 編集済み sasagaki 2013年10月30日 6:42
    2013年10月30日 6:34

回答

  • こんにちは。

    正しいという確信はないですが、ちょっとやってみた感じですと、以下のように、CANVASにGRIDを配置して、CANVASにLINEを配置するという。姑息かなぁ・・・
    X2とかX1など、で固定値の部分をバインド(コンバータ?)するか何かして計算された値がセットされるようにすればよいかなって思いました。

    GRIDに配置するコントロール(の配置のしかた)によっては、線が隠れちゃうかもしれませんね・・・

    <Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
        <Canvas Name="RootCanvas">
            <Line X2="200" Y2="{Binding ElementName=RootCanvas, Path=ActualHeight}" X1="200" Stroke="Blue"></Line>
            <Line X2="{Binding ElementName=RootCanvas, Path=ActualWidth}" X1="0" Y1="150" Y2="150" Stroke="Blue"></Line>
            <Grid Width="{Binding ElementName=RootCanvas, Path=ActualWidth}" Height="{Binding ElementName=RootCanvas, Path=ActualHeight}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="242*" />
                    <ColumnDefinition Width="261*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="146*" />
                    <RowDefinition Height="165*" />
                </Grid.RowDefinitions>
            </Grid>
           
        </Canvas>
    </Window>

    GRIDに配置するコンテンツにマージンをとってあげればOKかもしれませんね。

    <Button Content="Button" Margin="1"/>
    <Button Content="Button" Grid.Column="1" Grid.Row="1"  Margin="1"/>
    <Button Content="Button" Grid.Row="1"  Margin="1"/>
    <Button Content="Button" Grid.Column="1"  Margin="1"/>

    もうどっちが簡単なのかわからなくなっちゃいますね(^^;

    • 編集済み Keiichi Oumi 2013年10月30日 8:53 追記
    • 回答としてマーク sasagaki 2013年10月31日 0:36
    2013年10月30日 8:44
  • こんな?
    (わかりやすくするために太さを10倍にしてますが、実際には幅が1と0.5を使います)

    <UniformGrid Columns="2">
        <Grid Margin="20">
            <Grid.Resources>
                <Style TargetType="{x:Type Border}" >
                    <Setter Property="BorderBrush" Value="Silver" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="71*" />
                <RowDefinition Height="83*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="148*" />
                <ColumnDefinition Width="163*" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" Grid.Row="0" BorderThickness="10,10,10,10"/>
            <Border Grid.Column="1" Grid.Row="0" BorderThickness="0,10,10,10" />
            <Border Grid.Column="0" Grid.Row="1" BorderThickness="10,0,10,10"/>
            <Border Grid.Column="1" Grid.Row="1" BorderThickness="0,0,10,10"/>
            <TextBlock Text="ひとつずつ" Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    
        <Grid Margin="20">
            <Grid.Resources>
                <Style TargetType="{x:Type Border}" >
                    <Setter Property="BorderBrush" Value="Silver"/>
                    <Setter Property="BorderThickness" Value="10"/>
                    <Setter Property="Margin" Value="-5" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="71*" />
                <RowDefinition Height="83*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="148*" />
                <ColumnDefinition Width="163*" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" Grid.Row="0"/>
            <Border Grid.Column="1" Grid.Row="0"/>
            <Border Grid.Column="0" Grid.Row="1" />
            <Border Grid.Column="1" Grid.Row="1" />
    
            <TextBlock Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                マイナスマージン<LineBreak/>外側に線幅の半分はみ出る。<LineBreak/>内側になる線を2回重ねて書いている<LineBreak/>半透明の線だと
    
    濃さが変わってしまう
            </TextBlock>
        </Grid>
    
        <Border Margin="20" BorderThickness="5">
            <Border.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="BorderBrush" Value="Silver" />
                    <Setter Property="BorderThickness" Value="5"/>
                </Style>
            </Border.Resources>
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="71*" />
                    <RowDefinition Height="83*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="148*" />
                    <ColumnDefinition Width="163*" />
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" Grid.Row="0"/>
                <Border Grid.Column="1" Grid.Row="0"/>
                <Border Grid.Column="0" Grid.Row="1" />
                <Border Grid.Column="1" Grid.Row="1" />
                <TextBlock Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                    線幅半分で外にもボーダー<LineBreak/>隣り合うセルで線の色を変える場合注意
                </TextBlock>
            </Grid>
        </Border>
    
        <Border Margin="20" BorderThickness="10,10,0,0" BorderBrush="Silver">
            <Grid >
                <Grid.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="BorderBrush" Value="Silver" />
                        <Setter Property="BorderThickness" Value="0,0,10,10"/>
                    </Style>
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="71*" />
                    <RowDefinition Height="83*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="148*" />
                    <ColumnDefinition Width="163*" />
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" Grid.Row="0"/>
                <Border Grid.Column="1" Grid.Row="0"/>
                <Border Grid.Column="0" Grid.Row="1" />
                <Border Grid.Column="1" Grid.Row="1" />
                <TextBlock  Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                    外にもボーダーかつL字
                </TextBlock>
            </Grid>
        </Border>
    </UniformGrid>


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク sasagaki 2013年10月31日 0:36
    2013年10月30日 9:05

すべての返信

  • こんにちは。

    正しいという確信はないですが、ちょっとやってみた感じですと、以下のように、CANVASにGRIDを配置して、CANVASにLINEを配置するという。姑息かなぁ・・・
    X2とかX1など、で固定値の部分をバインド(コンバータ?)するか何かして計算された値がセットされるようにすればよいかなって思いました。

    GRIDに配置するコントロール(の配置のしかた)によっては、線が隠れちゃうかもしれませんね・・・

    <Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
        <Canvas Name="RootCanvas">
            <Line X2="200" Y2="{Binding ElementName=RootCanvas, Path=ActualHeight}" X1="200" Stroke="Blue"></Line>
            <Line X2="{Binding ElementName=RootCanvas, Path=ActualWidth}" X1="0" Y1="150" Y2="150" Stroke="Blue"></Line>
            <Grid Width="{Binding ElementName=RootCanvas, Path=ActualWidth}" Height="{Binding ElementName=RootCanvas, Path=ActualHeight}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="242*" />
                    <ColumnDefinition Width="261*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="146*" />
                    <RowDefinition Height="165*" />
                </Grid.RowDefinitions>
            </Grid>
           
        </Canvas>
    </Window>

    GRIDに配置するコンテンツにマージンをとってあげればOKかもしれませんね。

    <Button Content="Button" Margin="1"/>
    <Button Content="Button" Grid.Column="1" Grid.Row="1"  Margin="1"/>
    <Button Content="Button" Grid.Row="1"  Margin="1"/>
    <Button Content="Button" Grid.Column="1"  Margin="1"/>

    もうどっちが簡単なのかわからなくなっちゃいますね(^^;

    • 編集済み Keiichi Oumi 2013年10月30日 8:53 追記
    • 回答としてマーク sasagaki 2013年10月31日 0:36
    2013年10月30日 8:44
  • こんな?
    (わかりやすくするために太さを10倍にしてますが、実際には幅が1と0.5を使います)

    <UniformGrid Columns="2">
        <Grid Margin="20">
            <Grid.Resources>
                <Style TargetType="{x:Type Border}" >
                    <Setter Property="BorderBrush" Value="Silver" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="71*" />
                <RowDefinition Height="83*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="148*" />
                <ColumnDefinition Width="163*" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" Grid.Row="0" BorderThickness="10,10,10,10"/>
            <Border Grid.Column="1" Grid.Row="0" BorderThickness="0,10,10,10" />
            <Border Grid.Column="0" Grid.Row="1" BorderThickness="10,0,10,10"/>
            <Border Grid.Column="1" Grid.Row="1" BorderThickness="0,0,10,10"/>
            <TextBlock Text="ひとつずつ" Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    
        <Grid Margin="20">
            <Grid.Resources>
                <Style TargetType="{x:Type Border}" >
                    <Setter Property="BorderBrush" Value="Silver"/>
                    <Setter Property="BorderThickness" Value="10"/>
                    <Setter Property="Margin" Value="-5" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="71*" />
                <RowDefinition Height="83*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="148*" />
                <ColumnDefinition Width="163*" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0" Grid.Row="0"/>
            <Border Grid.Column="1" Grid.Row="0"/>
            <Border Grid.Column="0" Grid.Row="1" />
            <Border Grid.Column="1" Grid.Row="1" />
    
            <TextBlock Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                マイナスマージン<LineBreak/>外側に線幅の半分はみ出る。<LineBreak/>内側になる線を2回重ねて書いている<LineBreak/>半透明の線だと
    
    濃さが変わってしまう
            </TextBlock>
        </Grid>
    
        <Border Margin="20" BorderThickness="5">
            <Border.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="BorderBrush" Value="Silver" />
                    <Setter Property="BorderThickness" Value="5"/>
                </Style>
            </Border.Resources>
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="71*" />
                    <RowDefinition Height="83*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="148*" />
                    <ColumnDefinition Width="163*" />
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" Grid.Row="0"/>
                <Border Grid.Column="1" Grid.Row="0"/>
                <Border Grid.Column="0" Grid.Row="1" />
                <Border Grid.Column="1" Grid.Row="1" />
                <TextBlock Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                    線幅半分で外にもボーダー<LineBreak/>隣り合うセルで線の色を変える場合注意
                </TextBlock>
            </Grid>
        </Border>
    
        <Border Margin="20" BorderThickness="10,10,0,0" BorderBrush="Silver">
            <Grid >
                <Grid.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="BorderBrush" Value="Silver" />
                        <Setter Property="BorderThickness" Value="0,0,10,10"/>
                    </Style>
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="71*" />
                    <RowDefinition Height="83*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="148*" />
                    <ColumnDefinition Width="163*" />
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" Grid.Row="0"/>
                <Border Grid.Column="1" Grid.Row="0"/>
                <Border Grid.Column="0" Grid.Row="1" />
                <Border Grid.Column="1" Grid.Row="1" />
                <TextBlock  Grid.ColumnSpan="2" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                    外にもボーダーかつL字
                </TextBlock>
            </Grid>
        </Border>
    </UniformGrid>


    個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

    • 回答としてマーク sasagaki 2013年10月31日 0:36
    2013年10月30日 9:05
  • お~、いいですね~
    XAMLだけでできるってのがGoodですねー
    2013年10月30日 10:43
  • すぐにご回答いただいてありがとうございました。

    >Oumiさま

     ご回答ありがとうございました。

     CanVasとGridを組み合わせて利用する方法は、思いもつきませんでした。

     やり方を参考にさせていただきます。

    gekkaさま

     ご回答ありがとうございました。

     4つもサンプルを示していただいてありがとうございます。

     Styleの値の渡し方や、Marginにマイナス値を渡すことで、

     表現できるのですね・・

     やり方を参考にさせていただきます。

    2013年10月31日 0:35