Question

我设法使用stackpanels和itemscontrols创建了此表，但毕竟要花一些时间才能加载。在我的ViewModel中，我列出了包含房间的酒店。我设定的范围内每天的每个房间都可以预订或不预订。因此，在我的视图中，我需要在动态表格（？）中显示此数据，其中每行将有每家酒店，然后每家酒店将有每间客房，然后是月份和每个日期的列等，如图所示。最后，每个正方形都是带有工具提示的按钮，显示更多信息，如果单击该按钮，则必须选择行和列。我设法通过设置较粗的颜色来完成此操作。一切正常，但我认为这不是一个正确的实现，并且还需要很多时间来呈现。

这是我的输出

和xaml

                   <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                  VerticalScrollBarVisibility="Disabled">
                        <Border BorderBrush="Black"
                                BorderThickness="1"
                                Visibility="{Binding IsPlanVisible, Converter={StaticResource BoolToVisibilityConverter}}"
                                VerticalAlignment="Top"
                                HorizontalAlignment="Left">
                            <Grid VerticalAlignment="Top">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <StackPanel Orientation="Horizontal"
                                            VerticalAlignment="Top">
                                    <Border Width="150"
                                            BorderBrush="Black"
                                            BorderThickness="0,0,0,1">
                                        <TextBlock Text="Hotel"
                                                   Margin="5,0"
                                                   HorizontalAlignment="Left"
                                                   VerticalAlignment="Center" />
                                    </Border>
                                    <Border BorderBrush="Black"
                                            Width="110"
                                            BorderThickness="1,0,1,1">
                                        <TextBlock Text="RoomType" Margin="5"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center" />
                                    </Border>
                                    <ItemsControl ItemsSource="{Binding Months}">
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal" />
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <!--<Border>-->
                                                <StackPanel Orientation="Vertical"
                                                            Background="{Binding Background}">
                                                    <TextBlock Text="{Binding Name}"
                                                               MinHeight="30"
                                                               VerticalAlignment="Center"
                                                               HorizontalAlignment="Center" />
                                                    <ItemsControl ItemsSource="{Binding Days }">
                                                        <ItemsControl.ItemsPanel>
                                                            <ItemsPanelTemplate>
                                                                <StackPanel Orientation="Horizontal" />
                                                            </ItemsPanelTemplate>
                                                        </ItemsControl.ItemsPanel>
                                                        <ItemsControl.ItemTemplate>
                                                            <DataTemplate>
                                                                <Border BorderBrush="Black"
                                                                        Width="22"
                                                                        BorderThickness="0,1,1,1">
                                                                    <StackPanel Orientation="Vertical">
                                                                        <TextBlock Text="{Binding}"
                                                                                   HorizontalAlignment="Center" />
                                                                        <ToggleButton Width="22"
                                                                                      HorizontalAlignment="Center"
                                                                                      IsChecked="{Binding IsSelected,UpdateSourceTrigger=PropertyChanged}"
                                                                                      Command="{Binding DataContext.ToggleDateCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
                                                                                      CommandParameter="{Binding Date}">
                                                                            <TextBlock Text="{Binding  Date, StringFormat='{}{0:dd}' }"
                                                                                       HorizontalAlignment="Center" />
                                                                        </ToggleButton>
                                                                    </StackPanel>
                                                                </Border>
                                                            </DataTemplate>
                                                        </ItemsControl.ItemTemplate>
                                                    </ItemsControl>

                                                </StackPanel>
                                                <!--</Border>-->
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                    </ItemsControl>
                                </StackPanel>
                                <!--Hotels Item Control-->
                                <!--Each Row-->
                                <ScrollViewer Grid.Row="1"
                                              Margin="0,-1,0,0"
                                              HorizontalAlignment="Left"
                                              VerticalAlignment="Top"
                                              VerticalScrollBarVisibility="Auto"
                                              HorizontalScrollBarVisibility="Disabled">
                                    <ItemsControl ItemsSource="{Binding FilteredPlanList}"
                                                  VerticalAlignment="Top">
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Vertical" />
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <StackPanel Orientation="Horizontal">
                                                    <!--Each Hotel-->
                                                    <Border BorderBrush="Black"
                                                            Width="150"
                                                            BorderThickness="0,1,0,0"
                                                            HorizontalAlignment="Center">
                                                        <TextBlock Text="{Binding Name}"
                                                                   Padding="5,0,0,0"
                                                                   HorizontalAlignment="Left"
                                                                   VerticalAlignment="Center" />
                                                    </Border>
                                                    <!--Rooms Row-->
                                                    <ItemsControl ItemsSource="{Binding Rooms}"
                                                                  HorizontalAlignment="Left">
                                                        <ItemsControl.ItemsPanel>
                                                            <ItemsPanelTemplate>
                                                                <StackPanel Orientation="Vertical" />
                                                            </ItemsPanelTemplate>
                                                        </ItemsControl.ItemsPanel>
                                                        <ItemsControl.ItemTemplate>
                                                            <DataTemplate>
                                                                <!--Each Room Row-->
                                                                <StackPanel Orientation="Horizontal">
                                                                    <Border BorderBrush="Black"
                                                                            Width="109"
                                                                            BorderThickness="1,1,0,0"
                                                                            HorizontalAlignment="Center">
                                                                        <TextBlock Text="{Binding RoomType }"
                                                                                   Margin="0,1"
                                                                                   HorizontalAlignment="Center" />
                                                                    </Border>
                                                                    <!--Rectangles ItemSource-->
                                                                    <ItemsControl ItemsSource="{Binding BookedInfoList}"
                                                                                  HorizontalAlignment="Left">
                                                                        <ItemsControl.ItemsPanel>
                                                                            <ItemsPanelTemplate>
                                                                                <StackPanel Orientation="Horizontal" />
                                                                            </ItemsPanelTemplate>
                                                                        </ItemsControl.ItemsPanel>
                                                                        <ItemsControl.ItemTemplate>
                                                                            <DataTemplate>

                                                                                <Button Background="{Binding Converter={StaticResource BConverter}}"
                                                                                        HorizontalAlignment="Stretch"
                                                                                        Width="22"
                                                                                        ToolTipService.IsEnabled="{Binding Reservation,Converter={StaticResource ToolTipVis}}"
                                                                                        BorderBrush="{Binding IsDateSelected,Converter={StaticResource BoolToBorderColorConverter}}"
                                                                                        BorderThickness="1,0,0,1">
                                                                                    <Button.InputBindings>
                                                                                        <MouseBinding Gesture="LeftDoubleClick"
                                                                                                      Command="{  Binding DataContext.ViewReservationCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
                                                                                                      CommandParameter="{Binding Reservation}" />
                                                                                    </Button.InputBindings>
                                                                                    <Button.ToolTip>
                                                                                        <StackPanel>
                                                                                            <Grid Margin="0,0,0,5"
                                                                                                  DataContext="{Binding Reservation}">
                                                                                                <Grid.RowDefinitions>
                                                                                                    <RowDefinition Height="Auto" />
                                                                                                    <RowDefinition Height="Auto" />
                                                                                                    <RowDefinition Height="Auto" />
                                                                                                    <RowDefinition Height="Auto" />
                                                                                                </Grid.RowDefinitions>
                                                                                                <Grid.ColumnDefinitions>
                                                                                                    <ColumnDefinition Width="170" />
                                                                                                    <ColumnDefinition Width="130" />
                                                                                                </Grid.ColumnDefinitions>
                                                                                                <!--Row 0-->
                                                                                                <Border BorderBrush="Black"
                                                                                                        Grid.Row="0"
                                                                                                        Grid.Column="0"
                                                                                                        HorizontalAlignment="Stretch"
                                                                                                        BorderThickness="1">
                                                                                                    <TextBlock Text="{Binding Dates}"
                                                                                                               VerticalAlignment="Center"
                                                                                                               HorizontalAlignment="Center"
                                                                                                               Margin="5,0" />
                                                                                                </Border>
                                                                                                <Border BorderBrush="Black"
                                                                                                        Grid.Row="0"
                                                                                                        HorizontalAlignment="Stretch"
                                                                                                        Grid.Column="1"
                                                                                                        BorderThickness="0,1,1,1"></Border>
                                                                                                <Border BorderBrush="Black"
                                                                                                        Grid.Row="1"
                                                                                                        Grid.Column="0"
                                                                                                        HorizontalAlignment="Stretch"
                                                                                                        BorderThickness="1,0,1,1">
                                                                                                    <TextBlock Margin="5,0"
                                                                                                               HorizontalAlignment="Center"
                                                                                                               Text="{Binding Room.Hotel}" />
                                                                                                </Border>
                                                                                                <Border BorderBrush="Black"
                                                                                                        Grid.Row="1"
                                                                                                        HorizontalAlignment="Stretch"
                                                                                                        Grid.Column="1"
                                                                                                        BorderThickness="0,0,1,1">
                                                                                                    <TextBlock Margin="5,0"
                                                                                                               HorizontalAlignment="Center"
                                                                                                               Text="{Binding Room.RoomType}" />
                                                                                                </Border>
                                                                                                <!--Row 2-->
                                                                                                <Border BorderBrush="Black"
                                                                                                        Grid.Row="2"
                                                                                                        Grid.Column="0"
                                                                                                        HorizontalAlignment="Stretch"
                                                                                                        Grid.ColumnSpan="2"
                                                                                                        BorderThickness="1,0,1,1">
                                                                                                    <TextBlock Text="{Binding Names}"
                                                                                                               Margin="5,0"
                                                                                                               FontSize="10"
                                                                                                               HorizontalAlignment="Left" />
                                                                                                </Border>
                                                                                            </Grid>
                                                                                        </StackPanel>
                                                                                    </Button.ToolTip>
                                                                                </Button>
                                                                                <!--</Border>
                                                                                </Border>-->
                                                                            </DataTemplate>
                                                                        </ItemsControl.ItemTemplate>
                                                                    </ItemsControl>
                                                                </StackPanel>
                                                            </DataTemplate>
                                                        </ItemsControl.ItemTemplate>
                                                    </ItemsControl>
                                                </StackPanel>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                    </ItemsControl>
                                </ScrollViewer>
                            </Grid>
                        </Border>
                    </ScrollViewer>

WPF使用ItemSources创建动态表

0 个答案: