[Windows phone] welcome guide page 01 of 8

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

[The first effect]

Windows Phone welcome pages

[Train of thought]

Picture switching: pivot

Below the point: Ellipse filling

[Front]

<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>

[Backstage]

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

        // Constructor
        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);
            }
        }
    }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Samantha at December 22, 2013 - 11:26 AM