首页 > 解决方案 > 重新缩放日历时防止滚动查看器转到不同的水平偏移量

问题描述

我有一个日历视图,我通过增加一天的宽度来重新缩放(代码如下)。在重新缩放时,如何确保我的日历在不同的重新缩放点保持相同的视图(即:- 我有 4 个重新缩放点,25%、50%、75%、100%,这意味着增加一天的宽度在日历中按 25%、50% 等)?如果我当前的重新调整点为 100%,并且我的水平偏移指向 2018 年 4 月,则在更改为 50% 时,2018 年 4 月不会被保留并且当前的水平偏移指向不同的月份。如何确保保留相同的视图?有什么想法吗?

<ScrollViewer Name="CalendarScroller" HorizontalScrollBarVisibility="Auto"
                      VerticalScrollBarVisibility="Disabled" 
                      ViewChanged="ScrollViewer_ViewChangedAsync" >
        <Grid Name="CalendarGrid" Margin="0,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid><ListView  Name="LayoutView"
                           SelectionMode="None" BorderThickness="0" 
                           ItemsSource="{x:Bind calendarVM.Calender,Mode=OneWay}"
                           Loaded="LayoutView_Loaded" 
                           >
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <ItemsStackPanel Orientation="Horizontal" 
                                             />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="entity:Calendar" >
                                <Grid Margin="0,0,0,0" Padding="0" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="30"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Grid Background="#FAFAFA">
                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" 
                                                       VerticalAlignment="Center" Margin="10,0,0,0">
                                        <TextBlock Text ="{x:Bind Month}" FontWeight="Bold" FontSize="14" />
                                        <TextBlock Text="{x:Bind Year}" Margin="2,0,0,0" FontWeight="Bold" FontSize="14"/>
                                    </StackPanel>
                                </Grid>
                                <Grid Grid.Row="1">
                                    <ListView  Grid.Row="1"                                                                                
                                               Name="LayoutDaysView"
                                               SelectionMode="None"                                          
                                               VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"                                                                                                                                             
                                               ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                               ScrollViewer.HorizontalScrollMode="Enabled"
                                               ScrollViewer.IsHorizontalRailEnabled="True"
                                               ScrollViewer.VerticalScrollBarVisibility="Disabled"
                                               ScrollViewer.VerticalScrollMode="Disabled"
                                               ItemsSource="{x:Bind Days}"                                                   
                                               >
                                        <ListView.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <ItemsStackPanel Orientation="Horizontal"/>
                                            </ItemsPanelTemplate>
                                        </ListView.ItemsPanel>
                                        <ListView.ItemTemplate>
                                            <DataTemplate x:DataType="entity:Day">
                                                <Grid Margin="0,0,0,0" Padding="0" Background="Transparent">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="30"/>
                                                        <RowDefinition Height="*"/>
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid Background="#FAFAFA" 
                                                          Width="{x:Bind Width,Mode=TwoWay}"
                                                          Margin="0,0,0,0">
                                                        <Ellipse Width="28" Height="26" Fill="{x:Bind CurrentDayBg}" 
                                                         Margin="0,0,3,5"
                                                         Visibility="{x:Bind IsShowCurrentDay}"/>
                                                        <TextBlock Text="{x:Bind DayOfMonth}" Margin="0,1,3,0" FontSize="14"  
                                                                       Opacity="{Binding Opacity}" TextAlignment="Center" Foreground="{x:Bind CurrentDayFg}"  />
                                                    </Grid>
                                                    <Grid Width="{x:Bind Width,Mode=TwoWay}" Margin="0,0,0,0" 
                                                          Grid.Row="1"     MinHeight="{x:Bind Height}"
                                                          Background="{x:Bind DayBackground}">
                                                        <Border BorderBrush="#FAFAFA"  BorderThickness="0,0,2,0" 
                                                        HorizontalAlignment="Right" Grid.Row="2" />
                                                    </Grid>
                                                </Grid>
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                    </ListView>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </Grid>
    </ScrollViewer>

后面的代码:-(另一个具有重新缩放滑块的标题视图引发了一个事件,该事件在此视图中捕获以启动重新缩放)

private void OnRescalingCalendar(int daysWidth)
            {

                foreach (var day in calendarVM.Calender.SelectMany(x => x.Days))
                    day.Width = daysWidth;
            }

[enter image description here][1]


  [1]: https://i.stack.imgur.com/yaPcM.png    

标签: uwpscrollviewer

解决方案


推荐阅读