I want to build a "gaze enabled" app, where most controls could be activated just using one's gaze.
Doing that with a button is pretty easy. Just add gaze:GazeInteraction.Interaction = Enable to the button in XAML and when I dwell at it it's as if I've clicked on it with the cursor.
But it doesn't work with a TextBox that way. Maybe I should do something from code-behind?
I'm still a beginner with C# and I've already read this, but I coldn't understand it well, so I used that instead.
Here's my code so far:
<Page
x:Class="gazebox.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:gazebox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:gaze="using:Microsoft.Toolkit.Uwp.Input.GazeInteraction"
Width="500" Height="250">
<Grid Background="#FF1A3163" VerticalAlignment="Stretch">
<Button Content="Exit" HorizontalAlignment="Right" Margin="0,0,25,0" Height="100" Width="100" Background="#66E8E5E5" gaze:GazeInput.Interaction="Enabled"/>
<TextBox x:Name="textBox" Text="" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" Width="200" Margin="25,150,0,0" gaze:GazeInput.Interaction="Enabled"/>
<TextBox x:Name="textBox2" Text="" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" Width="200" Margin="25,50,0,0"/>
</Grid>
</Page>
and my .cs file is pretty much empty yet.
So, how do I make the TextBox(or any other element for that matter) be clicked when I dwell at it?
Any help would be greatly appreciated.
Pavel
p.s. I have a Tobii eye tracker
Related
I'm just new and messing around with the WPF C#.
I noticed that the design view and have some minor differences. Most noticeable at the button.
Design View:
Ouput # 1:
Ouput # 2:
It seems that the window/container is resizing/shrinking even when both min and max width's and height's were set with fixed values and resize mode is set to NoResize.
I could easily deal with some of the controls by setting up the vertical and horizontal alignments since the adjustments are not too noticeable, but for the Add button the differences are noticeable from the supposed output.
I did try setting the min size of the button so that it would not be affected by the resizing and there would still be space for the margins but the button properly renders only a part of it. (please see output 1)
The only compromise that I could is to set both vertical and horizontal alignment to stretch and not put any size constraints on the button but the button would end up shrinking from its original size. (please see output 2)
Here's the XAML for the window.
<Window x:Class="Game_Viewer.NewApp"
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"
xmlns:local="clr-namespace:Game_Viewer"
mc:Ignorable="d"
Title="Add New Program" Height="155" Width="250" ResizeMode="NoResize" Background="#FF515151" WindowStyle="ToolWindow" WindowStartupLocation="CenterScreen" MinHeight="155" MinWidth="250">
<Grid Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="appicon_img" Margin="10,10,0,0" Source="Resources/menu_bg.png" Stretch="Fill" Height="35" VerticalAlignment="Top" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="2"/>
<TextBox x:Name="apppath_txtbox" HorizontalAlignment="Left" Margin="10,55,0,0" Width="154" Foreground="White" Background="#FF6E6E6E" Text="Program Path" VerticalContentAlignment="Center" BorderBrush="#FF707070" MaxLines="1" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button Content="Search" Margin="169,55,10,0" Click="BrowseApp_Click" Foreground="White" Background="#FF515151" FontWeight="Medium" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button x:Name="add_btn" Content="Add Program" Margin="72,89,72,8" Foreground="White" Background="#FF515151" Click="AddProgram_Click" FontWeight="Medium" Grid.ColumnSpan="2" MinHeight="30" MinWidth="100"/>
<TextBox x:Name="appname_txtbox" Margin="50,10,10,0" TextWrapping="WrapWithOverflow" Foreground="White" Text="Program Name" MaxLines="1" IsUndoEnabled="True" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="#FF707070" FontWeight="Medium" Background="#FF6E6E6E" Height="35" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
</Grid>
</Window>
I would like to know a solution or round-about for this kind of issue.
It's not really a problem having this issue as it is only aesthetic but I would at least know the reason why this is happening. And could you refer me to good tutorials for wpf using c#.
Thanks in advance and have a wonderful day!
Consider the below WPF -
The issue is the text that appears in the label is being cut off if it is longer than the width of the label.
XAML - label name is 'factTxt'
<Window x:Name="mainScreen" x:Class="FactsOnAll.MainWindow"
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"
xmlns:local="clr-namespace:FactsOnAll"
mc:Ignorable="d"
Title="Random Facts" Height="450" Width="800" Icon="Properties/checklist.png">
<Grid>
<Button x:Name="getFactBtn" Content="Get Random Fact" HorizontalAlignment="Left" Margin="304,331,0,0" VerticalAlignment="Top" Width="177" Click="getFactBtn_Click" FontSize="20" Background="#FF8ECF87" Foreground="#FF444444"/>
<Label x:Name="factTxt" Content="" Margin="10,98,10,0" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="20"/>
<Label x:Name="titleTxt" Content="Random Facts" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="772" Height="46" FontSize="24"/>
</Grid>
</Window>
Expect result
Allow the text to go to a new line. I thought increasing the height of the label would fix this but no luck.
The Label has no wrapping but a TextBlock.
You can just create custom content like, that will wrap automatically:
<Label Width="100">
<TextBlock Text="Get Random Fact" TextWrapping="Wrap"/>
</Label>
I'm building an app in Universal Windows Platform and I have put a TextBox at the bottom of screen but I don't want it to shift the whole UI upwards, and I don't want to reorder everything to be fit above the keyboard.
I just wanna do something like Cortana that the keyboard can be above all layers.
What the app looks like itself:
What the app looks like after opening keyboard:
What Cortana looks like (which I want my app to be like this):
<Page
x:Class="Pi.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pi"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.Resources>
<FontFamily x:Key="Dekar">/Assets/Fonts/Dekar.otf#Dekar</FontFamily>
<FontFamily x:Key="Consolas">/Assets/Fonts/SFThin.otf#SF UI Display</FontFamily>
</Page.Resources>
<Grid Background="Black">
<Rectangle Margin="0">
<Rectangle.Fill>
<ImageBrush ImageSource="Assets/MainBG2.jpg" Stretch="UniformToFill" Opacity="0.35"/>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="TitleText" Height="21" Margin="10,18,10,0" TextWrapping="Wrap" Text="ADMIN ACCESS" VerticalAlignment="Top" Foreground="#FF00AEFF" FontSize="20" FontFamily="{StaticResource Dekar}" TextAlignment="Center" DoubleTapped="TitleText_DoubleTapped"/>
<TextBox x:Name="CommandBox" Margin="0,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Bottom" FontFamily="{StaticResource Consolas}" Foreground="#FF8D8D8D" Background="#BF111E23" BorderThickness="0,1,0,0" FontSize="17" Height="50" PlaceholderText="Type here..." Padding="10,12,0,0" RequestedTheme="Dark" BorderBrush="#FF00AEFF" KeyUp="KeyPressed"/>
<ScrollViewer Margin="10,65,10,60" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<TextBlock x:Name="ResultText" TextWrapping="Wrap" Text="What are your commands?" VerticalAlignment="Top" Foreground="#FFDEDEDE" FontSize="19" FontFamily="{StaticResource Consolas}" TextAlignment="Left"/>
</Grid>
By default the InputPane slides the page so that the focused element isn't covered by the keyboard. Your page has the focused TextBox at the bottom, so that has to slide up so the user can see what she types.
You can override this behavior by handling the InputPane.Showing event and setting the EnsuredFocusedElementInView property to let the InputPane know that you handled this and it doesn't need to slide.
You can move the TextBox to just above the InputPane's OccludedRect but leave the rest of the Page alone, then move the TextBox back in InoutPane.Hiding.
See
https://learn.microsoft.com/en-us/uwp/api/Windows.UI.ViewManagement.InputPane#events_
https://learn.microsoft.com/en-us/windows/uwp/input-and-devices/respond-to-the-presence-of-the-touch-keyboard#handling-the-showing-and-hiding-events
https://code.msdn.microsoft.com/windowsapps/keyboard-events-sample-866ba41c
So I am completely stuck. All i am trying to do is add a button outside a grid.
I am getting the error "The property 'Content' can only be set once.
I am trying to make a minesweeper game, which ofcourse contains a grid. And additional features such as restarting.
I have tried adding a stackpanel(and various other containers) around both the grid and the button ,then the content error goes away and i get a new error...
"An unhandled exception of type 'System.ArgumentException' occurred in PresentationCore.dll
Additional information: Must disconnect specified child from current parent Visual before attaching to new parent Visual."
I just need to know which container to use to have a button and potentially other components above the grid.
<Window x:Class="MineSweeper.MainWindow"
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"
xmlns:local="clr-namespace:MineSweeper"
mc:Ignorable="d"
Title="MineSweeper" Height="500" Width="525">
<Grid Name="oGrid" HorizontalAlignment="Left" Height="100" Margin="200,75,0,0" VerticalAlignment="Top" Width="100" Background="Transparent" PreviewMouseLeftButtonDown="oGrid_PreviewMouseLeftButtonDown"
PreviewMouseRightButtonDown="oGrid_PreviewMouseRightButtonDown">
</Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Canvas.Left="200" Canvas.Top="10"/>
Here is what i tried with stackpanel
<StackPanel>
<Grid Name="oGrid" HorizontalAlignment="Left" Height="100" Margin="200,75,0,0" VerticalAlignment="Top" Width="100" Background="Transparent" PreviewMouseLeftButtonDown="oGrid_PreviewMouseLeftButtonDown"
PreviewMouseRightButtonDown="oGrid_PreviewMouseRightButtonDown">
</Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Canvas.Left="200" Canvas.Top="10"/>
</StackPanel>
Your Problem is this: A window can only have 1 Content.
If you want to add multiple controls into a window you will Need to put them in some Kind of Container, like stackpanel or grid - So If you dont want it to be in your 'oGrid' you should place another Container around it.
<StackPanel>
<Grid Name="oGrid" HorizontalAlignment="Left" Height="100" Margin="200,75,0,0" VerticalAlignment="Top" Width="100" Background="Transparent" PreviewMouseLeftButtonDown="oGrid_PreviewMouseLeftButtonDown"
PreviewMouseRightButtonDown="oGrid_PreviewMouseRightButtonDown">
</Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Canvas.Left="200" Canvas.Top="10"/>
</StackPanel>
Edit: you just changed your Question... please post the code you tried with the Stackpanel e.g.
Ok, so I just tried out the WPF WPF Example from msdn, and I noticed it says you get a dropdown menu, but I only get a dropdown menu if I go to the xaml code itself.
And even then when selecting brown, it shows some darkish red color, what is up with that?
Question:
How to get the default brown color.
Code:
Sorry forgot the Xaml code..
<Window x:Class="WPF_Ink_Pane.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ink Pane" Height="550" Width="370">
<Grid Background="Brown" Height="520" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"/>
</Grid.ColumnDefinitions>
<InkCanvas x:Name="inkCanvas" Margin="9,9,10,68" Background="LightYellow"/>
<Button x:Name="btnClear" Content="Clear" HorizontalAlignment="Left" Margin="9,457,0,0" VerticalAlignment="Top" Width="149" Height="39" Click="btnClear_Click"/>
<Button x:Name="btnClose" Content="Close" HorizontalAlignment="Left" Margin="202,457,9,0" VerticalAlignment="Top" Width="150" Height="39" Click="btnClose_Click"/>
</Grid>
EDIT:
Is this what your properties window looks like?
MSDN must have meant SaddleBrown because yes, the standard Brown has a red tint to it.