在WPF中製作自定義時間表

我是vs10的新手，我正嘗試使用WPF製作自定義時間表/日曆。到目前爲止，我有一些視覺。我正在使用帶矩形和分隔符的網格來製作網格線。我感到困惑的是我每個月都能做出什麼。我希望能夠在兩個月之間切換兩個箭頭按鈕，但我不確定我能做些什麼才能使正確的日期顯示在應該出現的位置。我打算使用按鈕來顯示日曆上的每個日期，因此當用戶點擊它時，他/她可以爲該日期/日期添加事件/約會。任何建議或提示，非常感謝。在WPF中製作自定義時間表

Page x:Class="Camp_.SchedulePage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    mc:Ignorable="d" 
    d:DesignHeight="315" d:DesignWidth="587" 
Title="schedulePage" Background="#FF0A0A0A"> 
<Grid Width="Auto"> 
    <Calendar Height="174" HorizontalAlignment="Left" Margin="190,78,0,0" Name="calendar1" VerticalAlignment="Top" Width="189" /> 
<Grid> 
    <Grid.Background> 
     <RadialGradientBrush> 
      <GradientStop Color="#FFC3D6F5" Offset="0" /> 
      <GradientStop Color="#FFEFF5FF" Offset="1" /> 
     </RadialGradientBrush> 
    </Grid.Background> 
     <Grid HorizontalAlignment="Stretch" Margin="98,60,0,0" Name="grid1" VerticalAlignment="Stretch" Width="Auto" OpacityMask="Black" Opacity="1" Background="#FFC2ECEC" ShowGridLines="False"> 
      <Grid.Resources> <Style x:Key="VerticalSeparatorStyle" 
    TargetType="{x:Type Separator}" 
    BasedOn="{StaticResource {x:Type Separator}}"> 
       <Setter Property="Margin" Value="0,0,0,0"/> 
       <Setter Property="LayoutTransform"> 
        <Setter.Value> 
         <TransformGroup> 
          <TransformGroup.Children> 
           <TransformCollection> 
            <RotateTransform Angle="90"/> 
           </TransformCollection> 
          </TransformGroup.Children> 
         </TransformGroup> 
        </Setter.Value> 
       </Setter> 
       </Style> 
      </Grid.Resources> 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 
      <Separator Grid.ColumnSpan="7" Height="19" HorizontalAlignment="Stretch" Margin="0" Name="separator4" VerticalAlignment="Stretch" Width="Auto" Grid.Row="3" Grid.RowSpan="2" Background="Aqua" HorizontalContentAlignment="Stretch" Foreground="Aqua" OpacityMask="Aqua" /> 
      <Separator Height="19" HorizontalAlignment="Stretch" Margin="0" Name="separator2" VerticalAlignment="Stretch" Width="Auto" Background="Aqua" Grid.ColumnSpan="7" Grid.Row="1" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" /> 
      <Separator Height="26" HorizontalAlignment="Stretch" Name="separator1" VerticalAlignment="Stretch" Background="Aqua" Grid.Row="2" Grid.ColumnSpan="7" Margin="0" Grid.RowSpan="2" HorizontalContentAlignment="Stretch" Foreground="Aqua" /> 
      <Separator Height="27" HorizontalAlignment="Stretch" Margin="0" Name="separator3" VerticalAlignment="Stretch" Background="Aqua" Grid.ColumnSpan="7" Grid.RowSpan="2" Width="Auto" HorizontalContentAlignment="Stretch" Foreground="Aqua" /> 

      <Rectangle Height="Auto" HorizontalAlignment="Stretch" Name="rectangle1" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.RowSpan="5" /> 
      <Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle2" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1" /> 
      <Rectangle Grid.RowSpan="5" HorizontalAlignment="Stretch" Name="rectangle3" Stroke="Aqua" VerticalAlignment="Stretch" Width="Auto" Grid.Column="2" /> 
      <Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle4" Stroke="Aqua" Grid.Column="3" /> 
      <Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle5" Stroke="Aqua" Grid.Column="4" Margin="0" Grid.ColumnSpan="2" /> 
      <Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle6" Stroke="Aqua" VerticalAlignment="Stretch" Grid.Column="5" /> 
      <Rectangle Grid.RowSpan="5" Height="Auto" HorizontalAlignment="Stretch" Name="rectangle7" Stroke="Aqua" VerticalAlignment="Stretch" Grid.Column="6" /> 
      <Button Content="1" Height="20" HorizontalAlignment="Stretch" Name="button1" VerticalAlignment="Top" Width="Auto" Grid.Column="6" HorizontalContentAlignment="Left" /> 
      <Button Content="2" Height="20" HorizontalAlignment="Stretch" Name="button2" VerticalAlignment="Top" Width="Auto" Grid.Row="1" HorizontalContentAlignment="Left" /> 
     </Grid> 



     <Grid Height="31" HorizontalAlignment="Stretch" Margin="98,31,0,0" Name="grid2" VerticalAlignment="Top" Width="Auto"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 

      <Label Content="Sunday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label1" VerticalAlignment="Top" /> 
      <Label Content="Monday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label2" VerticalAlignment="Top" Grid.Column="1" /> 
      <Label Content="Tuesday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label3" VerticalAlignment="Top" Grid.Column="2" /> 
      <Label Content="Wednesday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,68,0" Name="label4" VerticalAlignment="Top" Grid.Column="3" Grid.ColumnSpan="2" /> 
      <Label Content="Thursday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,2,0" Name="label5" VerticalAlignment="Top" Grid.Column="4" /> 
      <Label Content="Friday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label6" VerticalAlignment="Top" Grid.Column="5" /> 
      <Label Content="Saturday" Height="28" HorizontalAlignment="Stretch" Margin="0,6,0,0" Name="label7" VerticalAlignment="Top" Grid.Column="6" /> 
     </Grid> 
     <Button Content="&gt;" Height="23" HorizontalAlignment="Left" Margin="488,6,0,0" Name="button3" VerticalAlignment="Top" Width="29" /> 
     <Button Content="&lt;" Height="23" HorizontalAlignment="Left" Margin="168,8,0,0" Name="button4" VerticalAlignment="Top" Width="29" /> 
    </Grid> 
</Grid>

來源

2011-10-26 TMan

通常我會Day對象的列表綁定到ItemsControl其ItemsPanel設置爲Grid 6行，7列，要麼每個Day軌道它是屬於什麼Week和WeekDay到，或者有一個轉換器爲我找出這些值。然後，我可以綁定這些值Grid.Row和Grid.Column在我ItemsControl.ItemContainerStyle

所以我Day物體看起來像：

public class Day : INotifyPropertyChanged 
{ 
    // Of course, these should implement the usual PropertyChange Notifications 
    public int WeekNo {get; set;} 
    public int WeekDay {get; set;} 
    public DateTime Date {get; set;} 
}

，我會在我的視圖模型，這將在XAML與綁定有一個ObservableCollection<Day> Days這樣的：

<ItemsControl ItemsSource="{Binding Days}"> 
    <!-- ItemsPanelTemplate --> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
      </Grid> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <!-- ItemContainerStyle --> 
    <ItemsControl.ItemContainerStyle> 
     <Style> 
      <Setter Property="Grid.Column" Value="{Binding DayOfWeek}" /> 
      <Setter Property="Grid.Row" Value="{Binding WeekNo}" /> 
     </Style> 
    </ItemsControl.ItemContainerStyle> 
</ItemsControl>

我寫了一篇關於如何如果你有興趣

012使用一個ItemsControl here一些例子

來源

2011-10-26 17:52:46 Rachel

所以我可能會做7整數天（星期日 - >星期六），但我很模糊你怎麼說我可以跟蹤它的工作日（星期）它屬於什麼或如何我可以做一個轉換器。什麼是itempanelTemplate？我爲無知而感到抱歉，但這對我來說尤其具有約束力。 :)感謝您輸入btw。 – TMan

@TMan請參閱我發佈的鏈接，瞭解ItemsControl的示例及其工作原理。它將遍歷一個集合，並逐個將每個項目繪製到屏幕上。「ItemsPanelTemplate」是容納所有項目的容器，而「ItemContainerStyle」是適用於所有項目的樣式。你也可以使用'ItemTemplate'來告訴WPF如何繪製每個項目。 – Rachel

劃傷itemspaneltemplate..just看到你的博客上的答案。 – TMan

在WPF中製作自定義時間表

回答

相關問題