We Keep Coding

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>

Getting a Report Viewer to fill a grid?

I am trying to use WPF to present a report to the user. I went ahead and used the report wizard to create the chart that I wanted. My issue is that I cannot seem to get the actual chart to fill the Grid/WindowsFormsHost that it is nested in.
It seems to want to stay at whatever width and height that I stretched it to in the RDLC designer. Is there any way to set it to fill its parent when I initialize it?
Edit:
Heres my XAML:
<Window x:Class="CloudMonitor.Client.UI.Start"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Start" Height="972" Width="1315"
xmlns:convert="clr-namespace:CloudMonitor.Client.Convert"
xmlns:rv="clr-namespace:Microsoft.Reporting.WinForms;assembly=Microsoft.ReportViewer.WinForms" >
<Window.Resources>
<convert:ConnectionStatusConverter x:Key="ConnectionStatusConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<Grid x:Name="ReportGrid" Grid.Row="0">
<WindowsFormsHost >
<rv:ReportViewer x:Name="_reportViewer"/>
</WindowsFormsHost>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="InitializeHubButton" Grid.Column="0" Content="Init Hub" Width="50" Height="20" HorizontalAlignment="Center" Click="InitializeHubButton_OnClick"></Button>
<Button x:Name="SendSimpleHailButton" Grid.Column="1" Content="Simple Hail" Width="90" Height="20" HorizontalAlignment="Center" Command="{Binding SendTestHail}" ></Button>
</Grid>
<Rectangle Fill="{Binding IsConnected, Converter={StaticResource ConnectionStatusConverter}}" Grid.Column="1" HorizontalAlignment="right" Height="20" Stroke="Black" VerticalAlignment="Bottom" Width="20"/>
</Grid>
</Window>

You need to create a Usercontrol and put the Report Viewer there then set it to your Grid.

Try replace this line from Window Definition:
Title="Start" Height="972" Width="1315"
With this:
Title="Start" d:DesignHeight="972" d:DesignWidth="1315"

WPF window has different colors in VS designer than when debugging?

The WPF window background color is white during design in Visual Studio, but when I debug the application, it is black instead. Why?
Here is my .xaml code:
<Controls:MetroWindow x:Class="XLTT.Views.About"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
ShowTitleBar="False"
WindowStartupLocation="CenterOwner"
ShowCloseButton="False"
ResizeMode="NoResize"
WindowStyle="ToolWindow"
Height="320"
Width="400"
Title="About" >
<!-- your content here -->
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Name="lblAppName" Margin="10" TextWrapping="Wrap" Text="Application Name :" VerticalAlignment="Stretch" FontSize="24" FontFamily="Segoe UI Light" Foreground="#FFF53800"/>
<TextBlock Name="lblBuild" Margin="10" TextWrapping="Wrap" Text="Build :" VerticalAlignment="Top" Grid.Row="1" FontSize="16" FontFamily="Segoe UI Light"/>
<TextBlock Name="lblOwner" Margin="10" TextWrapping="Wrap" Text="Owner :" VerticalAlignment="Top" Grid.Row="2" FontWeight="Bold" FontFamily="Segoe UI Light" FontSize="16" />
<TextBlock Name="lblLicense" Margin="10" TextWrapping="Wrap" Text="License" VerticalAlignment="Top" Grid.Row="3" FontWeight="Bold" Foreground="#FFEA1818" FontFamily="Segoe UI Light" FontSize="16" />
<Button Name="btnOk" Content="OK" HorizontalAlignment="Right" Margin="0,0,10,4" VerticalAlignment="Bottom" Width="94" Grid.Row="4" Click="btnOk_Click" Height="40"/>
</Grid>

Look at your App.xaml File.
If it contains:
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
Replace it with:
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
Explanation
Your App.xaml is the entry point for your program an will apply the style settings to every child Window / Page / Control, but often the VS Designer can't load all resources in designing mode. So in VS it will be default white and on running the Application applies the styles completely.
MahApps use 2 default style templates for windows:
"BaseLight", "BaseDark"
Testing
Of course if it's not in the App.xaml you can check this with ThemeManager.DetectAppStyle(this); in your MetroWindow Constructor debugging.
Or override in your App.xaml.cs the OnStartup() Methode like this:
public partial class App : Application
{
protected override void OnStartup (StartupEventArgs e)
{
// get the theme from the current application
var theme = ThemeManager.DetectAppStyle(Application.Current);
// now set the Green accent and dark theme
ThemeManager.ChangeAppStyle(Application.Current,
ThemeManager.GetAccent("Blue"),
ThemeManager.GetAppTheme("BaseLight"));
base.OnStartup(e);
}
}
UPDATE
After your telling us that there is no App.xaml Entry Point in your Application the problem is clear. MahApps requires some resource dictionaries, as you can read at the Quick Start Guide.
I think in your case you just missing the styles for MahApps. So add, after your <Controls:MetroWindow> Tag following:
<Controls:MetroWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Controls:MetroWindow.Resources>

WPF adds black bar to Window

I have built a WPF application with a variable width and height (xaml height and width definition for the window is set to Auto). Once the contents of the window are loaded, the width does not (well, is not supposed to) change. The height might change as items are removed or added from the list.
The background is a gradient, not an image.
After a period where the application is idling and isn't the top-most, when switching back to the application, the window is wider as a black bar was added, extending the window to the right.
.
(Before this black bar appears, the window's width is the section with the blue gradient background)
I've added a hidden menu item to the window and when the user presses Alt the menu appears. At first, I simply added the menu and opening it caused the window to re-render as menu the item suddenly became visible and added to the window's height. As the window was re-rendered, the black bar disappeared and the window was its original width.
I tried the following solutions by adding an event where Window.OnFocus calls a function which:
changes the width (adds 1 pixel and then removes 1 pixel)... but this doesn't seem to do anything.
checks the width of the window. If the width is larger than the expected width, a re-render is manually called. But no dice...
What is causing this black bar to appear? How can I prevent it from happening?
The biggest problem here is that I can't seem to consistently reproduce the problem... sometimes, the application will sit open, idling in the background for the whole day and this won't happen. Sometimes, I'll go out to lunch, come back and there it is...
The content is loaded dynamically upon starting up, and there's a webservice call initiated every few minutes to check for changes. At this stage of development and testing, there aren't all that many changes happening so that the ui items are simply static most of the time. Even so, this black bar will appear at times after the application idles for a while, as mentioned.
Per suggestion, here is the xaml for the application:
MainWindow:
<Window x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:y="clr-namespace:MyApp"
Title="MyApp"
Height="Auto" Width="390"
SizeToContent="WidthAndHeight"
WindowStyle="SingleBorderWindow"
WindowStartupLocation="Manual"
ResizeMode="CanMinimize">
<Grid Name="MainGrid" Style="{StaticResource Normal}">
<Grid.RowDefinitions>
<RowDefinition Height="18" />
<RowDefinition Height="65"/>
<RowDefinition Height="Auto" MinHeight="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="218" />
</Grid.ColumnDefinitions>
<Menu Grid.ColumnSpan="2"
[SETTINGS REMOVED FOR BREVITY]>
</Menu>
[ELEMENTS REMOVED FOR BREVITY]
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Height="Auto" Width="Auto" x:Name="ContentGrid"></Grid>
</Grid>
</Window>
MainPanel (which goes into the ContentGrid):
<UserControl x:Class="MyApp.MainPanel"
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"
Height="Auto" Width="Auto" FlowDirection="RightToLeft">
<Grid Margin="19,0,19,0">
<Grid.RowDefinitions>
<RowDefinition Height="65" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="75" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="85" />
<ColumnDefinition Width="85" />
</Grid.ColumnDefinitions>
<TextBlock Name="FirstHeader" Grid.Column="0" Grid.Row="0" Style="{StaticResource Header}" Text="***" />
<TextBlock Name="SecondHeader" Grid.Column="1" Grid.Row="0" Style="{StaticResource Header}">***<LineBreak />***</TextBlock>
<TextBlock Name="ThirdHeader" Grid.Column="2" Grid.Row="0" Style="{StaticResource Header}" Text="***" />
<StackPanel Name="MainStack" Grid.Row="1" Grid.ColumnSpan="3" />
<Button Name="ActionButton" Grid.ColumnSpan="3" Grid.Row="2" FlowDirection="LeftToRight" Style="{StaticResource NotInService}" Click="ActionButton_Click" />
</Grid>
</UserControl>
And the MainStack in the MainPanel is filled with these:
<UserControl x:Class="MyApp.mItem"
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"
d:DesignHeight="35" d:DesignWidth="348" FlowDirection="RightToLeft">
<Grid Margin="0,0,0,05">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="85" />
<ColumnDefinition Width="85" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Name="PanelActionButton" Style="{StaticResource PanelActionButton}" Click="PanelActionButton_Click">
<TextBlock Name="AnswerButtonText" Style="{StaticResource ButtonText}"></TextBlock>
</Button>
<Label Grid.Row="0" Grid.Column="1" Name="SecondCol" Style="{StaticResource SecondCol}" />
<Label Grid.Row="0" Grid.Column="2" Name="ThirdCol" Style="{StaticResource ThirdCol}" />
</Grid>
</UserControl>
I don't know if it's pertinent, but this is the way I've styled the background:
<Style TargetType="{x:Type Grid}" x:Key="Normal">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="1" RadiusY="1">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#00AEEF" Offset="0" />
<GradientStop Color="#034ea2" Offset="1" />
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="FlowDirection" Value="RightToLeft" />
</Style>

Some suggestions:
SizeToContent="WidthAndHeight"
could be changed to
SizeToContent="Height"
since you also defined the width to be 390.
Besides that, check if the window with the black area is still the expected width of 390.
Although it´s not in your posted code, check if elements could extend the width with it´s content (like images, long strings, etc.).
Another thing you should consider is to carefully choose your margins and widths (and heights) since they could easily sum up.
E.g. your using
<Grid.ColumnDefinitions>
<ColumnDefinition Width="160" />
<ColumnDefinition Width="85" />
<ColumnDefinition Width="85" />
</Grid.ColumnDefinitions>
twice and inside grids which each have a margin.
Also have a look at the menu you´re using. Since it´s using some visibility converter, my guess is, that it might generate a menu that could be more than 390 wide.
And finally... what´s with the
FlowDirection="RightToLeft"
If there´s no real need for it, delete it :)

Replace contents WPF grid control by grid in other XAML file

I'm trying to replace the content of a WPF grid control by another WPF grid defined in a second XAML file in code (c#).
(simplified example)
Window1.xaml:
<Window x:Class="Demo1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_Set Grid" Click="MenuItem_Click" />
</Menu>
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Name="statusItem">Status</StatusBarItem>
</StatusBar>
<Grid Name="header" DockPanel.Dock="Top">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Name="txtHi" Grid.Row="0" Grid.Column="0">Hi</TextBlock>
<TextBlock Name="txtName" Grid.Row="0" Grid.Column="1">X</TextBlock>
</Grid>
<Grid Name="gridContent">
</Grid>
</DockPanel>
Windows2.xaml contains the grid that replaces gridContent
<Window x:Class="Demo1.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window2" Height="300" Width="300">
<Grid Name="grid2">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Grid.Row="1">Hello !!!</Label>
</Grid>
The MenuItem_Click event in the code behind Windows1.xaml.cs contains:
private void MenuItem_Click(object sender, RoutedEventArgs e)
{
Window2 win2 = new Window2();
gridContent = win2.grid2;
setStatus();
}
private void setStatus() {
statusItem.Content = "gridContent has " + gridContent.RowDefinitions.Count + " rows and " + gridContent.ColumnDefinitions.Count + " columns.";
}
Although the statusItem say the gridContent contains 2 rows and 2 columns after a click on the menu, the window is not changed and does not contain the text Hello!!!
Any ideas what I'm doing wrong?
If there are better solutions to "embed" a grid from a second xaml file, please let me know.
Thanks,
Robbie

Replacing the value of the gridContent variable cannot have an effect on the controls tree.
You must first disconnect the grid2 from its parent and then add it to the children of gridContent, like this:
win2.Content = null;
gridContent.Children.Add(win2.grid2);
This works (I tried), but it is not the recommended way to create a Window, extract its content then place it in another window. You should use a UserControl in place of Window2 and then you can put it directly inside gridContent.