We Keep Coding

Handle the controls inside WPF User Control using WPF UI Automation

I am trying to handle a user control through WPF UI Automation,
I am unable to traverse through the User Control. Only able to traverse through the window where User Control is being consumed. Please suggest how can I work and get the handle of WPF user controls elements.
I am trying to handle through a windows application, I am following below code but it always returns null,
AutomationElement rootElement = AutomationElement.RootElement;
if (rootElement != null)
{
AutomationElement expander = appElement.FindFirst(TreeScope.Descendants, new PropertyCondition(AutomationElement.NameProperty, "Expander Name"));
AutomationElement expander = appElement.FindFirst(TreeScope.Descendants, new PropertyCondition(AutomationElement.AutomationIDProperty, "expID"));
}
The Expander in the user is written below,
<UserControl x:Class="UCCustomerInfo.CustInfo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:my2="clr-namespace:MyDatePicker;assembly=MyDatePicker"
mc:Ignorable="d"
Height="Auto"
xmlns:my="clr-namespace:UCCustomerInfo" Loaded="UserControl_Loaded">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/BFETH-CustomerMT;component/Resource/Resource-LinearGradientBrush.xaml"/>
<ResourceDictionary Source="pack://application:,,,/BFETH-CustomerMT;component/Resource/Resource-Control.xaml" />
<ResourceDictionary Source="pack://application:,,,/BFETH-CustomerMT;component/Resource/SBFEResources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Expander Style="{x:Null}" FontSize="16" Header="By num" Height="Auto" Name="byNum" VerticalAlignment="Top"
Margin="3,10,0,0" FontWeight="Bold" Foreground="#4E87D4" IsExpanded="False" >
<Border Name="borderRMno" Margin="20,0,13,0" BorderThickness="2,2,2,2" CornerRadius="3"
BorderBrush="#ADD8E6" Background="#DFEFF0">
<Grid Name="GridRMLPbyRMNo" Grid.Row="2" Margin="0,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="140"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Name="Custo_No" Content="Cust No" Margin="0,4"
Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left"/>
<TextBox Name="Cust_Search" Width="120" Height="26"
MaxLength="14"
Grid.Column="2" Grid.Row="0" Margin="0,3" HorizontalAlignment="left"
TabIndex="11"
/>
</Grid>
</Border>
</Expander>

Kinect 2.0 and WebBrowser (WPF): Interact with the web page using Kinect 2.0

I'm developing a WPF application that uses Kinect v2.0 for motion controls like grab-and-swipe and click. In this application, I have some elements:
A UserControl, which contains an Awesomium WebControl
A Window, which contains a button that creates the UserControl described above and puts it on the Window.
My problem is: although I can use the Kinect to click on the button, I can't use it to interact with the Web page loaded in the Awesomium WebControl. That is, I can't click on anything inside the WebControl, nor can I scroll the Web page.
How can I use the Kinect to interact with the WebControl?
Edit: Oops, sorry, forgot to post my code (first time asking, and it's very late here, I'm dead on my feet). Here it is:
When the button is clicked:
private void ButtonClick(object sender, RoutedEventArgs e)
{
Button senderButton = (Button)e.Source;
string name = senderButton.Name;
name = name.Remove(0, 1); //just getting some values
int i = int.Parse(name); //same as above
string url = newsUrl[i];
var aux = (WebContentBrowser)Activator.CreateInstance(typeof(WebContentBrowser));
Uri webUrl = new Uri(url);
aux.webBrowser.Source = webUrl;
this.navigationRegion.Content = aux;
this.menuButton.Visibility = System.Windows.Visibility.Visible;
kinectRegion.Focus();
this.kinectRegion.InputPointerManager.CompleteGestures();
//Window windowWeb = new WindowWeb(url);
//windowWeb.Show();
}
The XAML of the Windows mentioned on the question:
<Window x:Class="MuralDigitalKinectWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:k="http://schemas.microsoft.com/kinect/2014"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MuralDigitalKinectWPF"
mc:Ignorable="d"
Title="Mural Digital" Height="720" Width="1366" WindowStartupLocation="CenterScreen" WindowState="Maximized" >
<Window.Background>
<SolidColorBrush Color="DimGray"/>
</Window.Background>
<k:KinectRegion x:Name="kinectRegion">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="10 0 10 20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button x:Name="menuButton" Background="DimGray" Height="68" Width="68" Margin="0,0,0,0" Padding="0 0 0 0" Visibility="Hidden" Click="menuButton_Click">
<Image Height="64" Width="64" Visibility="Visible" Source="Images/back-navigational-arrow-button-pointing-to-left.png" Margin="0 0 0 0"></Image>
</Button>
<k:KinectUserViewer Grid.Column="1" HorizontalAlignment="Center" Height="100" VerticalAlignment="Top"></k:KinectUserViewer>
<TextBlock Grid.Column="1" Foreground="White" HorizontalAlignment="Right" Margin="0 0 -1 0" VerticalAlignment="Bottom" FontSize="24">Mural Digital</TextBlock>
</Grid>
<ContentControl Grid.Row="1" x:Name="navigationRegion">
<Grid x:Name="kinectRegionGrid" Margin="05 05 05 05">
<ScrollViewer Grid.Row="0"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled"
k:KinectRegion.IsScrollInertiaEnabled="True">
<ItemsControl Grid.Row="0" Name="itemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel VerticalAlignment="Top" Orientation="Horizontal" Margin="0 0 0 0" Button.Click ="ButtonClick" ></WrapPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
</ContentControl>
</Grid>
</k:KinectRegion>
The XAML of the UserControl:
<UserControl xmlns:awe="http://schemas.awesomium.com/winfx" x:Class="MuralDigitalKinectWPF.WebContentBrowser"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:k ="http://schemas.microsoft.com/kinect/2014"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MuralDigitalKinectWPF"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid x:Name="kinectRegionGrid">
<awe:WebControl x:Name="webBrowser" />
</Grid>

How to embed WPF Window into another Window and adjust its size via XAML or code

First of all it's my first day using Xaml so this question might be dummy for you, but i totally got lost.
Overview
My technique is that i have MainWindow.xaml and it's split into three areas (using grid columns) the columns width being set automatically.
Based on some actions in the right column, the middle column with show a page let's say Page.xaml that exists in different namespace.
What i'm seeking for
The problem is i need to set the width and height for this page to be equal the middle column width and height as it will fit this area.
Notes
I have very small experience with xaml and binding techniques.
MainWindow.Xaml
<Window
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"
WindowState="Maximized"
ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
Title="MainWindow" d:DesignWidth="1366" d:DesignHeight="768">
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*" x:Name="LeftColoumn" />
<ColumnDefinition Width="3*" x:Name="CenterColoumn" />
<ColumnDefinition Width=".8*" x:Name="RightColoumn" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="2">
<StackPanel Orientation="Vertical" x:Name="RightStackPanel" Background="LightGray" >
<Border BorderBrush="{x:Null}" Height="50" >
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontWeight="SemiBold" FontStyle="Normal" Margin="3" FontSize="20" >Others</TextBlock>
</Border>
<Expander x:Name="Expander1" Header="Others" Margin="0,0,10,0">
<Button Margin="0,0,0,0" Width="{Binding ActualWidth, ElementName=RightStackPanel}" Background="White" Content="Add" Height="50" Click="Button_Click" ></Button>
</Expander>
</StackPanel>
</ScrollViewer>
<Frame Grid.Column="0" x:Name="LeftFrame" Background="LightGray" ></Frame>
<Frame Grid.Column="1" x:Name="CenterFrame" Background="DarkGray" ></Frame>
</Grid></Window>
Other Xaml file
<Page
x:Name="Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Title="Any" d:DesignWidth="1364" d:DesignHeight="868"
>
<Grid>
<Frame Background="DarkGray" />
</Grid></Page>
MainWindow.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
Frame middleFrame=CenterColumn;
Otherxaml other=new Otherxaml();
middleFrame.Source = new Uri("OtherxamlPage.xaml", UriKind.RelativeOrAbsolute);
}

Pertinent to your code snippet, you may place the OtherxamlPage.xaml inside the central frame and set the properties of that frame like shown below:
<Frame Grid.Column="1" x:Name="CenterFrame" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Source="OtherxamlPage.xaml" Background="DarkGray" />
You can set the Source="OtherxamlPage.xaml" dynamically in event handler, e.g. Button.Click as per your example.
Alternatively, consider the creation of WPF UserControl (re: https://msdn.microsoft.com/en-us/library/cc294992.aspx) instead of that other XAML Window (or Page) and place it directly into the grid cell. In both cases set the content "Stretch" property in order to adjust its size automatically, thus you won't need to specify it in the code.
Hope this may help.

How to set XAML property via a function call?

I have a simple page with a rectangle, an ellipse, two sliders and a textblock.
The two slider controls (via binding) the height and width of the rectangle.
I would like to set the width and height of the ellipse based on the smallest value of the rectangles dimensions. The XAML code looks like this:
<UserControl
x:Class="App16.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App16"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="400"
d:DesignWidth="400"
x:Name="MyRoot">
<Grid Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Name="rect" Fill="Yellow"
Width="{Binding ElementName=rectX,Path=Value}"
Height="{Binding ElementName=rectY,Path=Value}" Grid.Column="0"/>
<Ellipse Fill="Yellow"
Width="{Binding ElementName=MyRoot,Path=SampleFunction}"
Height="{Binding ElementName=MyRoot,Path=SampleFunction}" Grid.Column="1" />
<StackPanel Grid.Row="1" Grid.ColumnSpan="2">
<Slider Name="rectX" HorizontalAlignment="Stretch" Minimum="100" Maximum="200" Value="150" />
<Slider Name="rectY" HorizontalAlignment="Stretch" Minimum="100" Maximum="200" Value="150" />
<TextBlock Foreground="White" Text="{Binding ElementName=MyRoot, Path=SampleFunction}" />
</StackPanel>
</Grid>
The code behind looks like this:
public Double SampleFunction {
get { return (rect.Width <= rect.Height ? rect.Width : rect.Height); }
}
In its current state, the rectangle resizes properly according to the value in the sliders, but "SampleFunction" is never called after the page is loaded.
Of course I could do this with the "RESIZED" event, but I wondering if this was possible without doing that.
Any suggestions? When the user adjust the slider control I would like to see the rectangle and ellipse change size.
Thanks!

Henk's suggestion with my comment would make it work, but actually for your scenario you can remove the bindings altogether and simply set
<Ellipse
Fill="Yellow"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="Uniform" />

Your SampleFunctionneeds to be renamed (it's a property, not a function).
And to make it work for DataBinding it needs to implement INotifyPropertyChanged
In addition, the internal logic should probably be base on ActualWidth and ActualHeight.

Dynamically reducing FontSize to avoid overflow

I have written a toy WPF application with a Button and an ItemsControl. Each time you click the Button, the string "AnotherWord" gets added to the ItemsControl. Now, the ItemsControl is displayed as horizontally oriented StackPanel with a fixed width (500 pixels). This means that when you click the button a certain number of times (actually six times), the newly added string gets clipped, like this:
"AnotherWord AnotherWord AnotherWord AnotherWord AnotherWord AnotherWo"
This happens when the FontSize is 13; if you lower it to 12.7 then there's room for the sixth occurence of "AnotherWord". My question is: Is there a way to make this adjustment at runtime so that you avoid the overflow?
EDIT:
In the context of the question, the fixed width of the StackPanel is obligatory - we cannot use more than the 500 pixels we have. Another requirement that the font must never become bigger than 13.
Here is all the code I wrote:
<!-- MainWindow.xaml -->
<Window x:Class="FontSize.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
<DataTemplate x:Key="labelTemplate">
<Label FontSize="13" Content="AnotherWord"></Label>
</DataTemplate>
<ItemsPanelTemplate x:Key="panelTemplate">
<StackPanel Orientation="Horizontal" Width="500" Height="50" />
</ItemsPanelTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsControl Grid.Row="0" ItemsSource="{Binding Path=MyStrings}" ItemTemplate="{StaticResource labelTemplate}"
ItemsPanel="{StaticResource panelTemplate}" />
<Button Grid.Row="1" Click="Button_Click"></Button>
</Grid>
</Window>
// MainWindow.xaml.cs
using System.Collections.ObjectModel;
using System.Windows;
namespace FontSize
{
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
MyStrings = new ObservableCollection<string>();
}
public ObservableCollection<string> MyStrings
{
get { return (ObservableCollection<string>) GetValue(MyStringsProperty); }
set { SetValue(MyStringsProperty, value); }
}
private static readonly DependencyProperty MyStringsProperty =
DependencyProperty.Register("MyStrings", typeof (ObservableCollection<string>), typeof (Window));
private void Button_Click(object sender, RoutedEventArgs e)
{
MyStrings.Add("AnotherWord");
}
}
}

Put your ItemsControl in a Viewbox and play with the following properties:
MaxWidth
MaxHeight
Stretch
StretchDirection
Edit
And remove the Width & Height property of your StackPanel.
Edit 2
Try something like that:
<!-- MainWindow.xaml -->
<Window x:Class="FontSize.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
<DataTemplate x:Key="labelTemplate">
<Label FontSize="13" Content="AnotherWord"></Label>
</DataTemplate>
<ItemsPanelTemplate x:Key="panelTemplate">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Viewbox Grid.Row="0" MaxWidth="500" Stretch="Uniform">
<ItemsControl
ItemsSource="{Binding Path=MyStrings}"
ItemTemplate="{StaticResource labelTemplate}"
ItemsPanel="{StaticResource panelTemplate}" />
</Viewbox>
<Button Grid.Row="1" Click="Button_Click"></Button>
</Grid>
</Window>
Edit 3
Change the horizontal alignment of the Viewbox so it isn't stretched to fill the grid. I've put "Center", replace by whatever you want.
...
<Viewbox
HorizontalAlignment="Center"
StretchDirection="DownOnly"
Grid.Row="0"
MaxWidth="500"
Stretch="Uniform">
...