【Windows phone 8】欢迎引导页面01

【先上效果】

【思路】

图片切换：pivot

下方的点: Ellipse的填充

【前端】

<Grid x:Name="LayoutRoot" Background="White">
        <phone:Pivot x:Name="imagePivot" HorizontalAlignment="Left" VerticalAlignment="Top" Height="800" Width="480" SelectionChanged="imagePanel_SelectionChanged_1">
            <phone:PivotItem Margin="0">
                <Image Source="/Assets/start_01.jpg"></Image>
            </phone:PivotItem>
            <phone:PivotItem Margin="0">
                <Image Source="/Assets/start_02.jpg"></Image>
            </phone:PivotItem>
            <phone:PivotItem Margin="0">
                <Image Source="/Assets/start_03.jpg"></Image>
            </phone:PivotItem>
            <phone:PivotItem Margin="0">
                <Image Source="/Assets/start_04.jpg"></Image>
            </phone:PivotItem>
        </phone:Pivot>
        <StackPanel x:Name="ellipsePanel" VerticalAlignment="Bottom" Orientation="Horizontal" HorizontalAlignment="Center">
            <Ellipse Width="10" Height="10" VerticalAlignment="Bottom" Margin="24" Stroke="#FFBDB8B4"></Ellipse>
            <Ellipse Width="10" Height="10" VerticalAlignment="Bottom" Margin="24" Stroke="#FFBDB8B4"></Ellipse>
            <Ellipse Width="10" Height="10" VerticalAlignment="Bottom" Margin="24" Stroke="#FFBDB8B4"></Ellipse>
            <Ellipse Width="10" Height="10" VerticalAlignment="Bottom" Margin="24" Stroke="#FFBDB8B4"></Ellipse>
        </StackPanel>
    </Grid>

 

【后台】

 public partial class MainPage : PhoneApplicationPage
    {
        private List<Ellipse> ellipses;
        private bool phoneLoaded = false;

        // 构造函数
        public MainPage()
        {
            InitializeComponent();
            ellipses = new List<Ellipse>();
        }

        private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e)
        {
            List<UIElement> ellipseList = this.ellipsePanel.Children.ToList();

            foreach (Ellipse item in ellipseList)
            {
                if (item.GetType() == typeof(Ellipse))
                {
                    ellipses.Add(item);
                }
            }
            EllipseFill(0);

            phoneLoaded = true;
        }

        private void EllipseFill(int index)
        {
            foreach (Ellipse item in ellipses)
            {
                item.Fill = null;
            }

            ellipses[index].Fill = new SolidColorBrush(Color.FromArgb(255, 189, 184, 180));
        }

        private void imagePanel_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            if (phoneLoaded)
            {
                EllipseFill(this.imagePivot.SelectedIndex);
            }
        }
    }