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
Hi Subbu,
ReplyDeleteI am new to windows phone development however previously i worked with ios app development.
i need to create a slide out menu for windows phone 8.1 which is very common in mobile environment.
i looked out for lot of resources but they are not that explanatory.can you please take an initiative to start a tutorial on the same.
thanks in advance for spreading knowledge
Regards
Richa