在 ItemsControl WPF 上设置网格线样式

Question

截至目前，在我的日历上，仅在该月所需的文本块（日期）周围放置边框。我有一个 7 列 6 行的网格，即 42 个单元格。一个月最多只有 31 天（单元格），所以我有很多没有边框的空单元格。我怎样才能改变它，以便所有 42 个单元格周围都有边框，使其看起来像日历应该的样子。提前致谢。 :)

<Grid Name="controlGrid" Margin="0,56,0,0">
  <Grid.ColumnDefinitions >
    <ColumnDefinition Width="86*" />
    <ColumnDefinition Width="83*" />
    <ColumnDefinition Width="84*" />
    <ColumnDefinition Width="84*" />
    <ColumnDefinition Width="84*" />
    <ColumnDefinition Width="84*" />
    <ColumnDefinition Width="84*" />
  </Grid.ColumnDefinitions>

  <ItemsControl ItemsSource="{Binding schedule}" 
                Name="Calender"
                VerticalAlignment="Stretch"
                Grid.ColumnSpan="7"
                Margin="0,-8,0,0">

    <ItemsControl.Template>
      <ControlTemplate TargetType="ItemsControl" >
        <Border BorderBrush="CornflowerBlue" BorderThickness="3">
          <ItemsPresenter/>
        </Border>
      </ControlTemplate>
    </ItemsControl.Template>

    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <Grid ShowGridLines="False" Name="gridCalender">
          <Grid.Background>
            <RadialGradientBrush>
              <GradientStop Color="#FFC3D6F5" Offset="0" />
              <GradientStop Color="#FFEFF5FF" Offset="1" />
            </RadialGradientBrush>
          </Grid.Background>
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
        </Grid>
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <Border BorderThickness="0.5" BorderBrush="CornflowerBlue">
          <TextBlock OpacityMask="Black"  Name="txtBlockdays">
            <Button Content="{Binding day}"
                    Width="175"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Top"
                    VerticalContentAlignment="Top"
                    HorizontalContentAlignment="Left"
                    Name="btnCalenderDate"
                    Click="btnCalenderDate_Click"
                    Loaded="btnCalenderDate_Loaded"
                    Height="18"
                    FontSize="10"
                    FontWeight="Bold">
            </Button>
          </TextBlock>
        </Border>
      </DataTemplate>
    </ItemsControl.ItemTemplate>

    <ItemsControl.ItemContainerStyle>
      <Style >
        <Setter  Property="Grid.Column" Value="{Binding WeekDay}"  />
        <Setter Property="Grid.Row" Value="{Binding WeekNo}" />
        <Setter Property="Control.BorderBrush" Value="Black" />
      </Style>
    </ItemsControl.ItemContainerStyle>
  </ItemsControl>
</Grid>

Answer 1

我使用了此处 之前扩展了 Grid 控件以包含允许您指定 GridLine 可见性、粗细和颜色的属性。

<local:GridEx ShowCustomGridLines="True" 
              GridLineBrush="#FF38B800" 
              GridLineThickness="2">
    ...
</local:GridEx>

以防链接失效，代码如下：

public class GridControl : Grid
{
    #region Properties
    public bool ShowCustomGridLines
    {
        get { return (bool)GetValue(ShowCustomGridLinesProperty); }
        set { SetValue(ShowCustomGridLinesProperty, value); }
    }

    public static readonly DependencyProperty ShowCustomGridLinesProperty =
        DependencyProperty.Register("ShowCustomGridLines", typeof(bool), typeof(GridControl), new UIPropertyMetadata(false));

    public Brush GridLineBrush
    {
        get { return (Brush)GetValue(GridLineBrushProperty); }
        set { SetValue(GridLineBrushProperty, value); }
    }

    public static readonly DependencyProperty GridLineBrushProperty =
        DependencyProperty.Register("GridLineBrush", typeof(Brush), typeof(GridControl), new UIPropertyMetadata(Brushes.Black));

    public double GridLineThickness
    {
        get { return (double)GetValue(GridLineThicknessProperty); }
        set { SetValue(GridLineThicknessProperty, value); }
    }

    public static readonly DependencyProperty GridLineThicknessProperty =
        DependencyProperty.Register("GridLineThickness", typeof(double), typeof(GridControl), new UIPropertyMetadata(1.0));
    #endregion

    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);
    }
    static GridControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl), new FrameworkPropertyMetadata(typeof(GridControl)));
    }
}

Answer 2

只需添加额外的虚拟项目来填充其他单元格......