Cách tạo ScrollViewer vòng/tròn trong Windows 8 Metro (C++/XAML)

Question

Trong ứng dụng Windows 8 Metro, có thể tạo ScrollViewer khi đạt mục cuối cùng trong khung nhìn, nó quay trở lại đầu tiên mục trong chế độ xem? Nếu vậy, làm thế nào tôi có thể đạt được hiệu ứng này?

Answer 1

Tôi không tin rằng có một điều khiển như vậy trong WinRT/XAML, vì vậy bạn sẽ cần phải thực hiện một điều khiển tùy chỉnh. Có nhiều cách tiếp cận bạn có thể thực hiện, nhưng có lẽ tôi sẽ tránh sử dụng ScrollViewer và xử lý các sự kiện thao tác trực tiếp vì nó có thể không dễ dàng làm cong hành vi của ScrollViewer theo yêu cầu của bạn. Tôi sẽ kiểm soát độ lệch cuộn dựa trên các sự kiện thao tác và dựa trên độ lệch cuộn - định vị các phần tử trong chế độ xem - ví dụ: bằng cách sử dụng điều khiển Canvas. Bạn sẽ cần đặt lại vị trí các yếu tố trong bảng điều khiển mục tùy thuộc vào độ lệch cuộn, sao cho các mục ví dụ vượt ra ngoài cổng xem ở một đầu được chuyển sang đầu kia. Nó sẽ liên quan đến các thuộc tính phụ thuộc tùy chỉnh, các mục chứa, vv Có lẽ ít nhất một vài giờ làm việc nếu bạn biết tất cả các API này.

Answer 2

Chắc chắn là có thể. Tôi đang giải quyết vấn đề vào lúc này và sẽ đăng công việc khi hoàn thành. Cho đến nay nó đi một cái gì đó như dưới đây.

Ý tưởng là bạn móc vào sự kiện được thay đổi cho trình xem cuộn, kích hoạt bất cứ lúc nào bạn di chuyển thanh. Khi đã ở đó, tính toán bạn đang ở đâu trong phần bù trừ và kích thước của các mục của bạn, và sau đó bạn có thể sử dụng để đo lường kích thước thực tế của vùng chứa hộp chứa của bạn hoặc những gì có bạn.

Khi bạn biết mình đang ở đâu và biết chiều cao thực tế của hộp danh sách và chiều cao của mặt hàng, bạn biết mặt hàng nào hiện có thể nhìn thấy và mục nào không. Hãy chắc chắn rằng danh sách của bạn bị ràng buộc với đối tượng là một bộ sưu tập quan sát thực hiện giao diện INotifyChanged với hai cách ràng buộc. Sau đó, bạn có thể xác định một tập hợp các đối tượng để xoay qua lại dựa trên nơi bạn đang di chuyển.

Một tùy chọn khác là thử một điểm khởi đầu khác, có lẽ là một điều khiển duy nhất với vùng chọn và thanh cuộn bên dưới?

XAML

</UserControl.Resources> 
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 
<ScrollViewer x:Name="ScrollViewer1"> 
    <ListBox x:Name="SampleListBox" Background="White" ItemsSource="{Binding Path=sampleItems}" ItemTemplate="{StaticResource sampleTemplate}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" Grid.RowSpan="2"> 

    </ListBox> 
</ScrollViewer> 
</Grid> 

Mã Đằng sau

public sealed partial class MainPage : Page 
{ 
    List<SampleItem> sampleItems; 
    const int numItems = 15; 
    public MainPage() 
    { 
     sampleItems = new List<SampleItem>(); 
     for (int i = 0; i < numItems; i++) 
     { 
      sampleItems.Add(new SampleItem(i)); 
     } 
     this.InitializeComponent(); 
     SampleListBox.ItemsSource = sampleItems; 
     ScrollViewer1.ViewChanged += ScrollViewer1_ViewChanged; 
    } 
    void ScrollViewer1_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) 
    { 
     ScrollViewer viewer = sender as ScrollViewer; 
     ListBox box = viewer.Content as ListBox; 
     ListBoxItem lbi = box.ItemContainerGenerator.ContainerFromIndex(0) as ListBoxItem; 
     double elementSize; 
     if (lbi == null) 
      return; 
     elementSize = lbi.ActualHeight; 

    }  /// <summary> 
    /// Invoked when this page is about to be displayed in a Frame. 
    /// </summary> 
    /// <param name="e">Event data that describes how this page was reached. The Parameter 
    /// property is typically used to configure the page.</param> 
    protected override void OnNavigatedTo(NavigationEventArgs e) 
    { 
    } 
} 

public class SampleItem 
{ 
    public String ItemCount { get; set; } 
    public SampleItem(int itemCount) 
    { 
     ItemCount = itemCount.ToString(); 
    } 
}