2

FlipView コントロールは Windows Phone 8 SDK では使用できません。同様の機能を実装するための代替アプローチは何ですか?

4

3 に答える 3

1

これは、WINRT FlipView コントロールのような WP8 用にカスタマイズされた FlipView コントロールです...

ステップ 1: 新しいユーザー コントロールを追加し、「FlipView.xaml」という名前を付けます。

ステップ 2 : "FlipView.xaml" に次の xaml を追加します。

 <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <ContentPresenter  Name="contentPresenter"/>
    <Button BorderThickness="0" Name="leftButton" FontSize="70" Margin="-25" HorizontalAlignment="Left" VerticalAlignment="Center" Content="&lt;" Click="Button_Click"/>
    <Button BorderThickness="0" Name="rightButton" FontSize="70" Margin="-25" HorizontalAlignment="Right" VerticalAlignment="Center" Content="&gt;" Click="Button_Click_1"/>
</Grid>

ステップ 3: 「FlipView.cs」に次のコードを追加します。

public partial class FlipView : UserControl
{
    public FlipView()
    {
        InitializeComponent();
        Datasource = new List<object>();
        SelectedIndex = 0;
    }

    private IList Datasource;
    public static readonly DependencyProperty ItemTemplateProperty =
        DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(FlipView), new PropertyMetadata(default(DataTemplate)));

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set
        {
            SetValue(ItemTemplateProperty, value);
            contentPresenter.ContentTemplate = value;
            contentPresenter.Content = SelectedItem;
        }
    }

    public static readonly DependencyProperty ItemsSourceProperty =
       DependencyProperty.Register("ItemsSource", typeof(IList), typeof(FlipView), new PropertyMetadata(default(IList)));

    public IList ItemsSource
    {
        get { return (IList)GetValue(ItemsSourceProperty); }
        set
        {
            SetValue(ItemsSourceProperty, value);
            Datasource = value;
            SelectedIndex = SelectedIndex;
        }
    }

    public static readonly DependencyProperty SelectedIndexProperty =
        DependencyProperty.Register("SelectedIndex", typeof(int), typeof(FlipView), new PropertyMetadata(default(int)));

    public int SelectedIndex
    {
        get { return (int)GetValue(SelectedIndexProperty); }
        set
        {
            SetValue(SelectedIndexProperty, value);

            rightButton.Visibility = leftButton.Visibility = Visibility.Visible;
            if (SelectedIndex == 0)
            {
                leftButton.Visibility = Visibility.Collapsed;
            }

            if (SelectedIndex + 1 == Datasource.Count)
            {
                rightButton.Visibility = Visibility.Collapsed;
                SelectedItem = Datasource[SelectedIndex];
            }

            if (Datasource.Count > SelectedIndex + 1)
            {
                SelectedItem = Datasource[SelectedIndex];
            }
        }
    }

    public static readonly DependencyProperty SelectedItemProperty =
        DependencyProperty.Register("SelectedItem", typeof(object), typeof(FlipView), new PropertyMetadata(default(object)));

    public object SelectedItem
    {
        get { return (object)GetValue(SelectedItemProperty); }
        set
        {
            SetValue(SelectedItemProperty, value);
            contentPresenter.Content = SelectedItem;
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        SelectedIndex--;
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        SelectedIndex++;
    }
}

ステップ 4 : メインページで、flipview Usercontrol を使用する名前空間を追加します。

例: xmlns:FlipViewControl="clr-namespace:ImageFlip" (注: ソリューション名によって異なります)。

ステップ 5 : 名前空間を使用して、flipview コントロールを次のように追加します。

  <Grid x:Name="LayoutRoot" Background="Transparent">
    <FlipViewControl:FlipView Name="imgViewer">
        <FlipViewControl:FlipView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}" Stretch="Fill"/>
            </DataTemplate>
        </FlipViewControl:FlipView.ItemTemplate>
    </FlipViewControl:FlipView>
</Grid>

ステップ 6: mainpage.cs に次のコードを追加します。

 // Constructor
    public MainPage()
    {
        InitializeComponent();

        // Sample code to localize the ApplicationBar
        //BuildLocalizedApplicationBar();
        imgViewer.ItemsSource = new List<string> { "/Images/1.jpg", "/Images/2.jpg", "/Images/3.jpg" };
    }

これが役立つことを願っています。

ありがとう

于 2014-06-13T05:23:51.597 に答える
1

FlipViewWindows Phone Toolkitのバージョンを使用しました。

NuGet 拡張機能を有効にしている場合、Toolkit の取得は非常に簡単です。Solution Exporer でプロジェクトを右クリック -> NuGet パッケージの管理 -> オンラインが選択されていることを確認 (左側の列) -> 検索フィールドに入力 (右側) column) "toolkit" -> 適切なパッケージの [インストール] ボタンをクリックします。

FlipViewコードビハインドの使用は次のように簡単です。

Microsoft.Phone.Controls.FlipView flipView = new Microsoft.Phone.Controls.FlipView(); flipView.ItemSource = myItemSource; flipView.ItemTemplate = myItemTemplate; この FrameworkElement はスワイプ ジェスチャにうまく反応するため、私はこのアプローチを使用することを好みました。

于 2014-09-10T14:19:20.953 に答える