日历重新缩放时,防止scrollviewer转到不同的水平偏移

时间:2019-04-23 07:31:20

标签: uwp scrollviewer

我有一个日历视图,可以通过增加一天的宽度来重新缩放(下面的代码)。在重新缩放时,如何确保日历在不同的缩放点上保持相同的视图(即:-我有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    

0 个答案:

没有答案