WPF: ตารางที่มีระยะขอบคอลัมน์ / แถว / ช่องว่างภายใน?

สามารถระบุระยะขอบและ / หรือช่องว่างภายในสำหรับแถวหรือคอลัมน์ใน WPF Grid ได้อย่างง่ายดายหรือไม่?

แน่นอนฉันสามารถเพิ่มคอลัมน์พิเศษเพื่อเว้นวรรคสิ่งต่างๆได้ แต่ดูเหมือนว่าจะเป็นงานสำหรับการขยาย / ระยะขอบ (จะให้XAML ที่ง่ายกว่ามาก ) มีใครบางคนมาจาก Grid มาตรฐานเพื่อเพิ่มฟังก์ชันนี้หรือไม่?

คุณสามารถเขียนGridWithMarginคลาสของคุณเองสืบทอดมาGridและแทนที่ArrangeOverrideเมธอดเพื่อใช้ระยะขอบ

RowDefinitionและColumnDefinitionเป็นประเภทContentElementและMarginเป็นFrameworkElementทรัพย์สินอย่างเคร่งครัด สำหรับคำถามของคุณ"เป็นไปได้อย่างง่ายดาย"คำตอบคือไม่แน่นอนที่สุด และไม่ฉันไม่เห็นแผงเค้าโครงใด ๆ ที่แสดงฟังก์ชันการทำงานประเภทนี้

คุณสามารถเพิ่มแถวหรือคอลัมน์เพิ่มเติมได้ตามที่คุณแนะนำ แต่คุณยังสามารถตั้งค่าระยะขอบให้กับGridองค์ประกอบเองหรืออะไรก็ได้ที่จะอยู่ภายใน a Gridซึ่งเป็นวิธีแก้ปัญหาที่ดีที่สุดสำหรับตอนนี้

ใช้ตัวBorderควบคุมภายนอกตัวควบคุมเซลล์และกำหนดช่องว่างภายในสำหรับสิ่งนั้น:

    <Grid>
        <Grid.Resources >
            <Style TargetType="Border" >
                <Setter Property="Padding" Value="5,5,5,5" />
            </Style>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0">
            <YourGridControls/>
        </Border>
        <Border Grid.Row="1" Grid.Column="0">
            <YourGridControls/>
        </Border>

    </Grid>

ที่มา:

• แหล่งที่มาเดิม
• และจาก Way Back Machine

คุณสามารถใช้สิ่งนี้:

<Style TargetType="{x:Type DataGridCell}">
  <Setter Property="Padding" Value="4" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type DataGridCell}">
        <Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
          <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>

หรือถ้าคุณไม่ต้องการ TemplateBindings:

<Style TargetType="{x:Type DataGridCell}">
   <Setter Property="Template">
      <Setter.Value>
          <ControlTemplate TargetType="{x:Type DataGridCell}">
              <Border Padding="4">
                  <ContentPresenter />
              </Border>
          </ControlTemplate>
      </Setter.Value>
  </Setter>
</Style>

คิดว่าฉันจะเพิ่มโซลูชันของตัวเองเพราะยังไม่มีใครพูดถึงเรื่องนี้ แทนที่จะออกแบบ UserControl ตาม Grid คุณสามารถกำหนดเป้าหมายการควบคุมที่อยู่ในกริดด้วยการประกาศลักษณะ ดูแลการเพิ่มช่องว่าง / ระยะขอบให้กับองค์ประกอบทั้งหมดโดยไม่ต้องกำหนดสำหรับแต่ละองค์ประกอบซึ่งยุ่งยากและใช้แรงงานมากตัวอย่างเช่นหาก Grid ของคุณไม่มีอะไรเลยนอกจาก TextBlocks คุณสามารถทำได้:

<Style TargetType="{x:Type TextBlock}">
    <Setter Property="Margin" Value="10"/>
</Style>

ซึ่งเปรียบเสมือนกับ "cell padding".

ใน uwp (Windows10FallCreatorsUpdate เวอร์ชันขึ้นไป)

<Grid RowSpacing="3" ColumnSpacing="3">

ฉันพบปัญหานี้ในขณะที่พัฒนาซอฟต์แวร์บางตัวเมื่อเร็ว ๆ นี้และทำให้ฉันถามว่าทำไม ทำไมพวกเขาถึงทำเช่นนี้ ... คำตอบอยู่ตรงหน้าฉัน แถวของข้อมูลคือวัตถุดังนั้นหากเรารักษาการวางแนวของวัตถุควรแยกการออกแบบสำหรับแถวหนึ่งออก (สมมติว่าคุณต้องใช้การแสดงแถวซ้ำในภายหลังในอนาคต) ดังนั้นฉันจึงเริ่มใช้แผงสแต็ก databound และการควบคุมแบบกำหนดเองสำหรับการแสดงข้อมูลส่วนใหญ่ รายการได้ปรากฏขึ้นเป็นครั้งคราว แต่ส่วนใหญ่จะใช้กริดสำหรับการจัดระเบียบเพจหลักเท่านั้น (ส่วนหัว, พื้นที่เมนู, พื้นที่เนื้อหา, พื้นที่อื่น ๆ ) ออบเจ็กต์ที่กำหนดเองของคุณสามารถจัดการข้อกำหนดระยะห่างสำหรับแต่ละแถวภายในแผงสแต็กหรือตารางได้อย่างง่ายดาย (เซลล์ตารางเดียวสามารถมีวัตถุทั้งแถวได้นอกจากนี้ยังมีประโยชน์เพิ่มเติมในการตอบสนองต่อการเปลี่ยนแปลงการวางแนว

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
  </Grid.RowDefinitions>

  <custom:MyRowObject Style="YourStyleHereOrGeneralSetter" Grid.Row="0" />
  <custom:MyRowObject Style="YourStyleHere" Grid.Row="1" />
</Grid>

หรือ

<StackPanel>
  <custom:MyRowObject Style="YourStyleHere" Grid.Row="0" />
  <custom:MyRowObject Style="YourStyleHere" Grid.Row="1" />
</StackPanel>

การควบคุมแบบกำหนดเองของคุณจะสืบทอด DataContext หากคุณใช้การผูกข้อมูล ...

แก้ไข:

ในการกำหนดระยะขอบให้กับการควบคุมใด ๆ คุณสามารถปิดการควบคุมด้วยเส้นขอบเช่นนี้

<!--...-->
    <Border Padding="10">
            <AnyControl>
<!--...-->

ตอนนี้ฉันทำมันด้วยกริดอันหนึ่งของฉัน

• ขั้นแรกให้ใช้ระยะขอบเดียวกันกับทุกองค์ประกอบภายในตาราง คุณสามารถทำแบบนี้ได้โดยใช้สไตล์หรืออะไรก็ได้ที่คุณต้องการ สมมติว่าคุณต้องการระยะห่างแนวนอน 6px และระยะห่างแนวตั้ง 2px จากนั้นคุณเพิ่มระยะขอบ "3px 1px" ให้กับชายด์ทุกคนของตาราง
• จากนั้นลบระยะขอบที่สร้างขึ้นรอบ ๆ เส้นตาราง (หากคุณต้องการจัดแนวเส้นขอบของตัวควบคุมภายในเส้นตารางให้อยู่ในตำแหน่งเดียวกันของเส้นตาราง) ตั้งค่าระยะขอบ "-3px -1px" ให้กับเส้นตาราง ด้วยวิธีนี้การควบคุมอื่น ๆ นอกตารางจะสอดคล้องกับตัวควบคุมที่อยู่นอกสุดภายในตาราง

ความเป็นไปได้อย่างหนึ่งคือการเพิ่มแถวและคอลัมน์ที่มีความกว้างคงที่เพื่อทำหน้าที่เป็นช่องว่างภายใน / ระยะขอบที่คุณกำลังมองหา

คุณอาจพิจารณาว่าคุณถูก จำกัด ด้วยขนาดของคอนเทนเนอร์และเส้นตารางจะมีขนาดใหญ่เท่ากับองค์ประกอบที่มีหรือความกว้างและความสูงที่ระบุ คุณสามารถใช้คอลัมน์และแถวโดยไม่ต้องกำหนดความกว้างหรือความสูง ด้วยวิธีนี้พวกเขาเริ่มต้นที่จะแบ่งพื้นที่ทั้งหมดภายในตารางเท่า ๆ กัน จากนั้นมันจะเป็นเพียงส่วนหนึ่งของการจัดองค์ประกอบของคุณในแนวตั้งและแนวนอนภายในตารางของคุณ

อีกวิธีหนึ่งอาจเป็นการรวมองค์ประกอบกริดทั้งหมดในแบบคงที่โดยใช้ตารางแถวและคอลัมน์เดียวที่มีขนาดและระยะขอบคงที่ ตารางของคุณมีกล่องความกว้าง / ความสูงคงที่ซึ่งมีองค์ประกอบจริงของคุณ

เมื่อเร็ว ๆ นี้ฉันมีปัญหาคล้ายกันในกริดสองคอลัมน์ฉันต้องการระยะขอบขององค์ประกอบในคอลัมน์ด้านขวาเท่านั้น องค์ประกอบทั้งหมดในทั้งสองคอลัมน์เป็นประเภท TextBlock

<Grid.Resources>
    <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource OurLabelStyle}">
        <Style.Triggers>
            <Trigger Property="Grid.Column" Value="1">
                <Setter Property="Margin" Value="20,0" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Grid.Resources>

แม้ว่าคุณจะไม่สามารถเพิ่มระยะขอบหรือช่องว่างในตารางได้ แต่คุณสามารถใช้บางอย่างเช่นเฟรม (หรือคอนเทนเนอร์ที่คล้ายกัน) ซึ่งคุณสามารถใช้กับมันได้

ด้วยวิธีนี้ (หากคุณแสดงหรือซ่อนตัวควบคุมบนปุ่มให้คลิกพูด) คุณไม่จำเป็นต้องเพิ่มระยะขอบในทุกตัวควบคุมที่อาจโต้ตอบกับตัวควบคุม

คิดว่าเป็นการแยกกลุ่มของการควบคุมออกเป็นหน่วยจากนั้นใช้สไตล์กับหน่วยเหล่านั้น

ตามที่ระบุไว้ก่อนสร้างคลาส GridWithMargins นี่คือตัวอย่างรหัสการทำงานของฉัน

public class GridWithMargins : Grid
{
    public Thickness RowMargin { get; set; } = new Thickness(10, 10, 10, 10);
    protected override Size ArrangeOverride(Size arrangeSize)
    {
        var basesize = base.ArrangeOverride(arrangeSize);

        foreach (UIElement child in InternalChildren)
        {
            var pos = GetPosition(child);
            pos.X += RowMargin.Left;
            pos.Y += RowMargin.Top;

            var actual = child.RenderSize;
            actual.Width -= (RowMargin.Left + RowMargin.Right);
            actual.Height -= (RowMargin.Top + RowMargin.Bottom);
            var rec = new Rect(pos, actual);
            child.Arrange(rec);
        }
        return arrangeSize;
    }

    private Point GetPosition(Visual element)
    {
        var posTransForm = element.TransformToAncestor(this);
        var areaTransForm = posTransForm.Transform(new Point(0, 0));
        return areaTransForm;
    }
}

การใช้งาน:

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication1"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <local:GridWithMargins ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            <Rectangle Fill="Green" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
            <Rectangle Fill="Blue" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </local:GridWithMargins>
    </Grid>
</Window>

ฉันประหลาดใจที่ฉันยังไม่เห็นวิธีแก้ปัญหานี้โพสต์

มาจากเว็บเฟรมเวิร์กเช่น bootstrap จะใช้ระยะขอบลบเพื่อดึงแถว / คอลัมน์กลับมา

มันอาจจะดูละเอียดเล็กน้อย (แม้ว่าจะไม่แย่ขนาดนั้นก็ตาม) มันใช้งานได้และองค์ประกอบจะมีระยะห่างและขนาดเท่า ๆ กัน

ในตัวอย่างด้านล่างฉันใช้StackPanelรูทเพื่อสาธิตว่าปุ่ม 3 ปุ่มมีระยะห่างเท่า ๆ กันโดยใช้ระยะขอบอย่างไร คุณสามารถใช้องค์ประกอบอื่น ๆ ได้เพียงแค่เปลี่ยน x ภายใน: พิมพ์จากปุ่มเป็นองค์ประกอบของคุณ

แนวคิดนี้ง่ายมากใช้เส้นตารางด้านนอกเพื่อดึงระยะขอบขององค์ประกอบออกจากขอบเขตครึ่งหนึ่งของจำนวนเส้นตารางด้านใน (โดยใช้ระยะขอบลบ) ใช้เส้นตารางด้านในเพื่อเว้นระยะห่างองค์ประกอบให้เท่า ๆ กันตามจำนวนที่คุณต้องการ

อัปเดต: ความคิดเห็นบางส่วนจากผู้ใช้บอกว่าใช้ไม่ได้นี่คือวิดีโอสั้น ๆ ที่สาธิต: https://youtu.be/rPx2OdtSOYI

    <StackPanel>
        <Grid>
            <Grid.Resources>
                <Style TargetType="{x:Type Grid}">
                    <Setter Property="Margin" Value="-5 0"/>
                </Style>
            </Grid.Resources>

            <Grid>
                <Grid.Resources>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Margin" Value="10 0"/>
                    </Style>
                </Grid.Resources>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Button Grid.Column="0" Content="Btn 1" />
                <Button Grid.Column="1" Content="Btn 2" />
                <Button Grid.Column="2" Content="Btn 3" />
            </Grid>

        </Grid>

        <TextBlock FontWeight="Bold" Margin="0 10">
            Test
        </TextBlock>
    </StackPanel>

บางครั้งวิธีง่ายๆก็ดีที่สุด เพียงแค่เว้นวรรคสตริงของคุณ หากเป็นเพียงไม่กี่กล่องข้อความเป็นต้นนี่เป็นวิธีที่ง่ายที่สุด

คุณยังสามารถแทรกคอลัมน์ / แถวว่างที่มีขนาดคงที่ได้ ง่ายมากและคุณสามารถเปลี่ยนได้อย่างง่ายดาย