堆栈面板在翻转视图中与椭圆绑定

Question

大家好！我需要一点帮助我有一个翻转视图，我在其中使用了一些包含图像和文本块的堆栈面板，现在我想用省略号绑定它们。

这是我的 xaml flipview 代码

  <Grid Grid.Row="1" x:Name="flipp1">
                <FlipView x:Name="flip1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="auto" Width="auto" Background="#1C1C1C" BorderThickness="0,5,0,0" BorderBrush="Red" Grid.Row="1" Margin="-3">  <StackPanel Tapped="StackPanel_Tapped_1">
                        <Grid>
                            <Image x:Name="caredi" Source="Assets/images/editcars.png" Height="30" Width="30" Margin="340,15,55,170" Tapped="caredit_Tapped"></Image>
                            <Image Source ="Assets/images/logosmall.png" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="26,27,0,0"/>
                            <Image Source ="Assets/car2.png" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="None" Margin="0,40,25,30" />
                            <RichTextBlock Foreground="Gray" FontSize="15" HorizontalAlignment="Left" Height="66" VerticalAlignment="Center" Width="197" Margin="26,120,0,0">
                                <Paragraph>
                                    <Run Text="Car Model : Toyota XLI  Reg No: Karachi Last vist : 18/dex/2015"/>
                                </Paragraph>
                            </RichTextBlock>
                        </Grid>
                    </StackPanel>        
                      <StackPanel Tapped="StackPanel_Tapped_1">
                            <Grid>
                                <Image x:Name="caredit" Source="Assets/images/editcars.png" Height="30" Width="30" Margin="340,15,55,170" Tapped="caredit_Tapped"></Image>
                                <Image Source ="Assets/images/logosmall.png" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="36,27,0,0"/>
                                <Image Source ="Assets/car2.png" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="None" Margin="0,40,45,30" />
                                <RichTextBlock Foreground="Gray" FontSize="15" HorizontalAlignment="Left" Height="66" VerticalAlignment="Top" Width="197" Margin="36,134,0,0">
                                    <Paragraph>
                                        <Run Text="Car Model : Toyota XLI  Reg No: Karachi Last vist : 18/dex/2015"/>
                                    </Paragraph>
                                </RichTextBlock>
                            </Grid>
                       </StackPanel<Flipview></Grid>

列表框中省略号的代码

 <ListBox x:Name="ContextControl1" Height="20" VerticalAlignment="Bottom" SelectedItem="{Binding SelectedItem, ElementName=flip1, Mode=TwoWay}" Style="{StaticResource ListBoxStyle1}" ItemContainerStyle="{StaticResource ContextControlItemStyle}" Background="{x:Null}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>

我如何绑定它们以如图所示在翻页视图中移动？

enter image description here

Answer 1

我希望你的运行它在 winodws 上 phone 8. 你必须使用工具包中提供的 flipview(here) and for nuget package here

<<------更新---->>

Banner.cs

 public  class Banner
    {
        public string Url1 { get; set; }
        public string Url2 { get; set; }
        public string Title { get; set; }
   public Banner(string url1,string url2,string title)
    {
        Url1 = url1;
        Url2 = url2;
        Title = title;
    }
    }

在xaml.cs

  public ObservableCollection<Banner> List{get;set;}
List = new  ObservableCollection<Banner>();
    List.Add(new Banner("Assets/images/editcars.png","Assets/images/editcars.png","text"));
    List.Add(new Banner("Assets/images/editcars.png","Assets/images/editcars.png","text")); 

    <FlipView x:Name="flip1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="auto" Width="auto" Background="#1C1C1C" BorderThickness="0,5,0,0" BorderBrush="Red" Grid.Row="1" Margin="-3" ItemSource={Binding List}> 

<StackPanel Tapped="StackPanel_Tapped_1">                       
                            <Image x:Name="caredi" Source="{Binding Url1}" Height="30" Width="30" Margin="340,15,55,170" Tapped="caredit_Tapped"></Image>
                            <Image Source ="{Binding Url2}" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="26,27,0,0"/>

                            <RichTextBlock Foreground="Gray" FontSize="15" HorizontalAlignment="Left" Height="66" VerticalAlignment="Center" Width="197" Margin="26,120,0,0">
                                <Paragraph>
                                    <Run Text="{Binding Title}"/>
                                </Paragraph>
                            </RichTextBlock>                    
                    </StackPanel>                                                 
                      <Flipview>

ellpise 代码

<ListBox x:Name="ContextControl1" ItemSource={Binding List} Height="20" VerticalAlignment="Bottom" SelectedItem="{Binding SelectedItem, ElementName=flip1, Mode=TwoWay}" Style="{StaticResource ListBoxStyle1}" ItemContainerStyle="{StaticResource ContextControlItemStyle}" Background="{x:Null}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>

Indicator.xaml如下

<UserControl x:Class="MyDeals.UserControls.Indicator"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         FontFamily="{StaticResource PhoneFontFamilyNormal}"
         FontSize="{StaticResource PhoneFontSizeNormal}"
         Foreground="{StaticResource PhoneForegroundBrush}"
         Height="12"
         d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" >
    <StackPanel Name="IndicatorPanel" Orientation="Horizontal" />
</Grid>

指标。xaml.cs

    using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace MyDeals.UserControls
{
    public partial class Indicator : UserControl
    {
        /// <summary>
        /// Public ItemsCount property of type DependencyProperty
        /// </summary>
        public static readonly DependencyProperty ItemsCountProperty =
        DependencyProperty.Register("ItemsCount",
            typeof(int),
            typeof(Indicator),
            new PropertyMetadata(OnItemsCountChanged));

        /// <summary>
        /// Public SelectedPivotIndex property of type DependencyProperty
        /// </summary>
        public static readonly DependencyProperty SelectedPivotIndexProperty =
        DependencyProperty.Register("SelectedPivotIndex",
            typeof(int),
            typeof(Indicator),
            new PropertyMetadata(OnPivotIndexChanged));

        /// <summary>
        /// Constructor
        /// </summary>
        public Indicator()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Gets or sets number of pivot items
        /// </summary>
        public int ItemsCount
        {
            set { SetValue(ItemsCountProperty, value); }
            get { return (int)GetValue(ItemsCountProperty); }
        }

        /// <summary>
        /// Gets or sets index of selected pivot item
        /// </summary>
        public int SelectedPivotIndex
        {
            set { SetValue(SelectedPivotIndexProperty, value); }
            get { return (int)GetValue(SelectedPivotIndexProperty); }
        }

        /// <summary>
        /// OnItemsCountChanged property-changed handler 
        /// </summary>
        private static void OnItemsCountChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            (obj as Indicator).SetRectangles();
        }

        /// <summary>
        /// OnPivotIndexChanged property-changed handler 
        /// </summary>
        private static void OnPivotIndexChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            (obj as Indicator).AccentRectangle();
        }

        /// <summary>
        /// Draws rectangles.
        /// </summary>
        private void SetRectangles()
        {
            IndicatorPanel.Children.Clear();
            for (int i = 0; i < this.ItemsCount; i++)
            {
                Ellipse ellipse = new Ellipse()
                {
                    Height = 9,
                    Width = 9,
                    Margin = new Thickness(6, 0, 0, 0)
                };
                //Rectangle rectangle = new Rectangle() { Height = 9, Width = 9, Margin = new Thickness(4, 0, 0, 0) };
                IndicatorPanel.Children.Add(ellipse);
            }
            this.AccentRectangle();
        }

        /// <summary>
        /// Accents selected pivot item rectangle.
        /// </summary>
        private void AccentRectangle()
        {
            int i = 0;
            foreach (var item in IndicatorPanel.Children)
            {
                if (item is Ellipse)
                {
                    Ellipse ellipse = (Ellipse)item;
                    if (i == this.SelectedPivotIndex)
                        ellipse.Fill = new SolidColorBrush(Colors.Red);
                    else
                        ellipse.Fill = new SolidColorBrush(Colors.Gray);
                    i++;
                }
            }
        }
    }
}

ATBBanners 是 itemsource 和 ATBCount 你必须绑定

Winodws 中有内置控件 flipview phone 8.1

Answer 2

为简化解决方案，请进行以下更改：

将您的项目添加到 FlipViewItem 中的堆栈面板。
更改 SelectedIndex 以滚动到特定的 flipviewitem。

堆栈面板在翻转视图中与椭圆绑定

stackpanel binding with ellipses in flipview

xaml

windows-phone-8.1