uwp - 重新缩放日历时防止滚动查看器转到不同的水平偏移量
问题描述
我有一个日历视图,我通过增加一天的宽度来重新缩放(代码如下)。在重新缩放时,如何确保我的日历在不同的重新缩放点保持相同的视图(即:- 我有 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
解决方案
推荐阅读
- scala - Scala:为什么类型转换隐式会破坏代码
- reactjs - 如何在 React 中导入函数组件?
- android - 如何在 gpuimage 中提供多个位图作为输入?
- node.js - 如何从 node-red 节点访问 sqlite 数据库?
- chisel - 不能做“import chisel3._”
- python - 运行样式转换代码时出现 Cmd 错误
- python - 如何比较 2 个不同 csv 文件中不同列的值?
- c++ - C++ 重载 ostream 和 istream 运算符
- ios - Paypal Payment 信用卡支付问题
- c# - 在 asp.net 的 Dropdown 或 RedCombobox 内创建表