用网格线进行Winrt custrom网格控制 [英] Winrt custrom grid control with gridlines

问题描述

我想制作一个自定义的网格控件，因为默认不支持显示网格线。我发现了一个wpf解决方案，但是winrt缺少wpf支持的一些功能。 wpf soulution中的代码如下所示：

  protected override OnRender（DrawingContext dc）
 {
 if（ShowCustomGridLines）
 {
 foreach（RowDefinitions中的var rowDefinition）
 {
 dc.DrawLine（new Pen（GridLineBrush，GridLineThickness），new Point（0，rowDefinition。偏移），新点（ActualWidth，rowDefinition.Offset））; 
 
 
 foreach（ColumnDefinitions中的var columnDefinition）
 {
 dc.DrawLine（new Pen（GridLineBrush，GridLineThickness），new Point（columnDefinition.Offset，0） ，新的Point（columnDefinition.Offset，ActualHeight））; 
} 
 dc.DrawRectangle（Brushes.Transparent，new Pen（GridLineBrush，GridLineThickness），new Rect（0，0，ActualWidth，ActualHeight））; 
} 
 base.OnRender（dc）; 
} 
  

然而，我无法重写onrender方法，并且没有drawingcontext WinRT的。那么我怎样才能在网格中绘制网格线？
感谢您的帮助！

解决方案

如果您不想在每个元素周围放置边框，我所做的基本上你在做什么，但是在xaml中实际上只是将它们绘制成类似的样子;

 < Border BorderBrush =Black BorderThickness =1Horizo​​ntalAlignment =左> 
<网格> 
< Grid.RowDefinitions> 
< RowDefinition Height =20/> 
< RowDefinition Height =20/> 
< RowDefinition Height =20/> 
< RowDefinition Height =20/> 
< RowDefinition Height =20/> 
< /Grid.RowDefinitions> 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =20/> 
< ColumnDefinition Width =20/> 
< ColumnDefinition Width =20/> 
< ColumnDefinition Width =20/> 
< ColumnDefinition Width =20/> 
< /Grid.ColumnDefinitions> 
<！ - 水平线 - > 
< Rectangle Grid.ColumnSpan =5Height =1VerticalAlignment =BottomFill =Black/> 
< Rectangle Grid.Row =1Grid.ColumnSpan =5Height =1VerticalAlignment =BottomFill =Black/> 
< Rectangle Grid.Row =2Grid.ColumnSpan =5Height =1VerticalAlignment =BottomFill =Black/> 
< Rectangle Grid.Row =3Grid.ColumnSpan =5Height =1VerticalAlignment =BottomFill =Black/> 
< Rectangle Grid.Row =4Grid.ColumnSpan =5Height =1VerticalAlignment =BottomFill =Black/> 
<！ - 垂直线 - > 
< Rectangle Grid.RowSpan =5Width =1Horizo​​ntalAlignment =RightFill =Black/> 
< Rectangle Grid.Column =1Grid.RowSpan =5Width =1Horizo​​ntalAlignment =RightFill =Black/> 
< Rectangle Grid.Column =2Grid.RowSpan =5Width =1Horizo​​ntalAlignment =RightFill =Black/> 
< Rectangle Grid.Column =3Grid.RowSpan =5Width =1Horizo​​ntalAlignment =RightFill =Black/> 
< / Grid> 
< / Border> 
  

通过这种方式，您可以根据自己的喜好设置单元格，并且可以减少必须将所有内容边界。希望能帮助到你。干杯！

I want to make a custom grid control, because the default doesn't support showing grid lines. I found a wpf solution for this, but the winrt lacks few features that the wpf supports. The code in the wpf soulution is something like this :

     protected override void OnRender(DrawingContext dc)
    {
        if (ShowCustomGridLines)
        {
            foreach (var rowDefinition in RowDefinitions)
            {
                dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(0, rowDefinition.Offset), new Point(ActualWidth, rowDefinition.Offset));
            }

            foreach (var columnDefinition in ColumnDefinitions)
            {
                dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(columnDefinition.Offset, 0), new Point(columnDefinition.Offset, ActualHeight));
            }
            dc.DrawRectangle(Brushes.Transparent, new Pen(GridLineBrush, GridLineThickness), new Rect(0, 0, ActualWidth, ActualHeight));
        }
        base.OnRender(dc);
    }

However I can't override the onrender method, and there is no drawingcontext in winrt. So how can I draw gridlines to my grid? Thanks for the help!

解决方案

If you want to not have to put borders around every single element what I do is basically what you do but in xaml just essentially draw them kind of like for example;

<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>    
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>        
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="20"/>
        </Grid.ColumnDefinitions>
        <!-- Horizontal Lines -->
        <Rectangle Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="1" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="2" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="3" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <Rectangle Grid.Row="4" Grid.ColumnSpan="5" Height="1" VerticalAlignment="Bottom" Fill="Black"/>
        <!-- Vertical Lines -->
        <Rectangle Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
        <Rectangle Grid.Column="1" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
        <Rectangle Grid.Column="2" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
        <Rectangle Grid.Column="3" Grid.RowSpan="5" Width="1" HorizontalAlignment="Right" Fill="Black"/>
    </Grid>
</Border>

This way you can have cells arranged however you like and you can cut down on having to nest everything in borders. Hope it helps. Cheers!

这篇关于用网格线进行Winrt custrom网格控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！