WindowsPhone: Get the controls which are visible with in the screen bounds(C#-XAML)

Introduction:

This post is explained about "How to get child items in windowsphone " as well "How to get the controls which are visible with in the screen bounds?".

Building the sample:

This sample is targeted on windowsphone 8.0 

Decsription:

See in above image in "Introduction" section ,i have eleven buttons(b1,b2,b3,b4,b5,b6,b7,b8,b9,b10,b11),but among these three buttons(b3,b8,b9) are out of screen bounds.So here i am trying to find-out the controls which are visible with in the screen bounds.However we need to follow two steps

1)Get the child elements of Parent layout(i.e ParentStack)

2)Loop the every child items and check the visibility status within in the screen bounds.

So lets start to found elements within the screen bounds

1)Get the child elements of Parent layout C#:

Here i am going take help of "VisualTreeHelper" which is very helpful for finding child items .So i made one helper method to get all child items of specified parent layout((i.e ParentStack).And in this method after finding the child items ,i added those child control objects to "collection"

C#

public static List<Control> collection = new List<Control>(); 
        public static void EnumVisual(DependencyObject parent) 
        { 
            int parent_childitems_count = VisualTreeHelper.GetChildrenCount(parent); 
            for (int i = 0; i < parent_childitems_count; i++) 
            { 
                // Get the child visual at specified index value. 
                var child = VisualTreeHelper.GetChild(parent, i); 
 
               
                string name = (string)(parent.GetValue(FrameworkElement.NameProperty) ?? ""); 
                int Sub_childitems_count = VisualTreeHelper.GetChildrenCount(child); 
                if (child is Control) 
                { 
                    var frameworkElement = child as FrameworkElement; 
 
                    if (frameworkElement != null & frameworkElement.Name != "") 
                    {  // Add the child visual object to the collection. 

                        collection.Add(child as Control); 
                    } 
 
                    if (Sub_childitems_count > 1) 
                    { 
                        EnumVisual(child); 
                    } 
                } 
                else 
                { 
                    EnumVisual(child); 
 
                } 
 
            } 
        }

And finally i used that method in Loaded event like this

C#

EnumVisual(ParentStack);

2)How to get the controls which are visible with in the screen bounds:

Step1:Get the current screen resolutions bounds

Step2:Loop above collection child objects

Step3:In Loop get visibility status of particular child object

Step4:Display results of child items

C#

void visibilitystatus() 
        { 
           //Get the current screen resoultion bounds 
    Rect screenBounds = new Rect(0, 0, Application.Current.Host.Content.ActualWidth, Application.Current.Host.Content.ActualHeight); 
     string VisibileObjects = "Elements Visible :\n"; 
    string InVisibileObjects = "Elements Not Visible :\n"; 
    //Loop all child control objects from collection 
    foreach (var childobj in collection) 
                    { 
                     //Find visibility status of your child item 
                    if (VisualTreeHelper.FindElementsInHostCoordinates(screenBounds, LayoutRoot).Contains(childobj)) 
                            VisibileObjects = VisibileObjects + childobj.Name + "\n"; 
                    else 
                            InVisibileObjects = InVisibileObjects + childobj.Name + "\n"; 
            } 
    //Display child items status  
    MessageBox.Show("" + VisibileObjects + "\n" + InVisibileObjects); 
      } 

Finally i used above method in button click "GetVisibilityCheck"s

C#

private void GetVisibilityCheck(object sender, RoutedEventArgs e) 
  { 
      visibilitystatus(); 
  }

And the UI design in xaml is

XAML

<Grid x:Name="LayoutRoot" Background="#FF2DD8E0"> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
 
        <!--TitlePanel contains the name of the application and page title--> 
        <StackPanel Orientation="Horizontal" Name="FirstStackpanel" Grid.Row="0" Margin="0,17,0,0"> 
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
            <Button HorizontalAlignment="Right" Name="TapHere" Click="GetVisibility_Click"/> 
        </StackPanel> 
 
        <!--ContentPanel - place additional content here--> 
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
            <StackPanel Name="ParentStack"> 
                <StackPanel  Name="SecondStackpanel" Orientation="Vertical"  > 
                    <Button   Content="Button1" Name="b1"  /> 
                    <Button Content="Button2" Name="b2" /> 
                    <Button Content="Button3" Name="b3" Margin="500,0,0,0" MinWidth="400" /> 
                    <Button Content="Button4" Name="b4"  /> 
                    <Button Content="Button5" Name="b5" /> 
                </StackPanel> 
                <StackPanel Name="ThirdStackpanel" Orientation="Vertical"  > 
                    <Button   Content="Button6" Name="b6"  /> 
                    <Button Content="Button7" Name="b7" /> 
                    <Button Content="Button8" Name="b8" Margin="500,0,0,0" MinWidth="400" /> 
                    <Button Content="Button9" Name="b9" Margin="-418,0,508,0" /> 
                    <Button Content="Button10" Name="b10" /> 
                </StackPanel> 
                <StackPanel Height="30" Name="FourthStackpanel" Orientation="Vertical"  > 
                    <Grid> 
                        <Button Content="Button11" Name="b11"/> 
                    </Grid> 
                </StackPanel> 
            </StackPanel> 
 
        </Grid> 

    </Grid> 

After clicking on "TapHere" button you will get following screen

Please find total source code here,and you must read the related post here.

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)