ItemsControl WPF上的网格线样式化

本文关键字：样式 网格线 WPF ItemsControl | 更新日期: 2023-09-27 18:13:07

到目前为止，在我的日历上，边框只放置在当月需要的文本块(日期)周围。我有一个网格，有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>

ItemsControl WPF上的网格线样式化

我之前使用了这里的代码，它扩展了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)));
    }
}

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

相关文章：