WPF 日歷控件開發實戰（三）：定義 DayHeaders 星期標題區

DayHeaders XAML 定義

星期標題區由 7 個欄位組成，每欄放置一個 MonthCalendarDayHeader 控件，透過資料綁定與轉換器動態顯示星期名稱：

<!-- DayHeaders -->
<Grid x:Name="DayHeaders" Grid.Column="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/>
        <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <DateControls:MonthCalendarDayHeader Grid.Column="0" Style="{TemplateBinding DayHeaderStyle}"
        DataContext="{Binding Path=FirstDayOfWeek, Mode=OneWay, Converter={StaticResource MonthCalendarDayHeaderConverter}, ConverterParameter=0, RelativeSource={RelativeSource AncestorType={x:Type DateControls:MonthCalendar}}}" />
    <DateControls:MonthCalendarDayHeader Grid.Column="1" Style="{TemplateBinding DayHeaderStyle}"
        DataContext="{Binding Path=FirstDayOfWeek, Mode=OneWay, Converter={StaticResource MonthCalendarDayHeaderConverter}, ConverterParameter=1, RelativeSource={RelativeSource AncestorType={x:Type DateControls:MonthCalendar}}}" />
    <DateControls:MonthCalendarDayHeader Grid.Column="2" Style="{TemplateBinding DayHeaderStyle}"
        DataContext="{Binding Path=FirstDayOfWeek, Mode=OneWay, Converter={StaticResource MonthCalendarDayHeaderConverter}, ConverterParameter=2, RelativeSource={RelativeSource AncestorType={x:Type DateControls:MonthCalendar}}}" />
    <DateControls:MonthCalendarDayHeader Grid.Column="3" Style="{TemplateBinding DayHeaderStyle}"
        DataContext="{Binding Path=FirstDayOfWeek, Mode=OneWay, Converter={StaticResource MonthCalendarDayHeaderConverter}, ConverterParameter=3, RelativeSource={RelativeSource AncestorType={x:Type DateControls:MonthCalendar}}}" />
    <DateControls:MonthCalendarDayHeader Grid.Column="4" Style="{TemplateBinding DayHeaderStyle}"
        DataContext="{Binding Path=FirstDayOfWeek, Mode=OneWay, Converter={StaticResource MonthCalendarDayHeaderConverter}, ConverterParameter=4, RelativeSource={RelativeSource AncestorType={x:Type DateControls:MonthCalendar}}}" />
    <DateControls:MonthCalendarDayHeader Grid.Column="5" Style="{TemplateBinding DayHeaderStyle}"
        DataContext="{Binding Path=FirstDayOfWeek, Mode=OneWay, Converter={StaticResource MonthCalendarDayHeaderConverter}, ConverterParameter=5, RelativeSource={RelativeSource AncestorType={x:Type DateControls:MonthCalendar}}}" />
    <DateControls:MonthCalendarDayHeader Grid.Column="6" Style="{TemplateBinding DayHeaderStyle}"
        DataContext="{Binding Path=FirstDayOfWeek, Mode=OneWay, Converter={StaticResource MonthCalendarDayHeaderConverter}, ConverterParameter=6, RelativeSource={RelativeSource AncestorType={x:Type DateControls:MonthCalendar}}}" />
</Grid>
<!-- DayHeaders -->

關鍵機制解析

• FirstDayOfWeek 屬性型別為 DayOfWeek 列舉
• 透過 ConverterParameter 傳遞 0-6 索引參數
• MonthCalendarDayHeaderConverter 型別轉換器根據索引與起始星期計算顯示文字
• 樣式支援 TemplateBinding DayHeaderStyle，允許外部自定義

分隔線

<Rectangle x:Name="DayHeadersSplitLine" Grid.Column="1" Fill="Black" Height="1" VerticalAlignment="Bottom" Margin="2,0,2,0"/>

預設顯示效果