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
Related
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
I've created a UserControl that contains a ScrollViewer, a StackPanel and two buttons. I've disabled the horizontal scroll bar and want to use the buttons to scroll. But when I set HorizontalSnapPointsType inside of the control it doesn't work. If I add the ScrollViewer directly into my main xaml the property is set. The other properties like HorizontalScrollBarVisibility and HorizontalScrollMode are set properly so I'm not sure what the issue is. I've included xaml below.
<UserControl
x:Class="TestApp.Controls.CarouselScrollViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<ScrollViewer x:Name="ScrollViewer"
HorizontalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
HorizontalSnapPointsType="Mandatory">
<ContentPresenter x:Name="Content" Content="{x:Bind ScrollViewerContent}" />
</ScrollViewer>
<Button VerticalAlignment="Center" HorizontalAlignment="Left" Content="LEFT" Background="White" Click="LeftButton_OnClick" Name="BtnLeft"/>
<Button VerticalAlignment="Center" HorizontalAlignment="Right" Content="RIGHT" Background="White" Click="RightButton_OnClick" Name="BtnRight"/>
</Grid>
And then the xaml that's calling the control.
<Page
x:Class="TestApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp"
xmlns:controls="using:TestApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<controls:CarouselScrollViewer SegmentWidth="400">
<controls:CarouselScrollViewer.ScrollViewerContent>
<StackPanel Orientation="Horizontal">
<Image Source="Assets/cole_anne.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/icecream.JPG" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/jibby_hotdog.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/andy_courtney_norah.png" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/boating.JPG" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/dev.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/moir_crab.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
<Image Source="Assets/MoirJudLindsayIlgaboating.jpg" Height="300" Width="400" Stretch="UniformToFill" Margin="5" />
</StackPanel>
</controls:CarouselScrollViewer.ScrollViewerContent>
</controls:CarouselScrollViewer>
</Grid>
ScrollViewer.HorizontalSnapPointsType property declares how manipulation behavior reacts to the snap points along the horizontal axis. And as it is declared in the Remarks, this property works for panning actions:
For panning actions, there are often natural stopping places. Snap points provide a way to indicate where these places are. Then, when a user swipes, the manipulation result favors that natural point using behavior as expressed by a SnapPointsType value.
More specifically, this property applies in Touch mode. Ref the "Panning behaviors" section of Guidelines for panning:
Panning with the swipe gesture introduces inertia behavior into the interaction when the touch contact is lifted. With inertia, the content continues to pan until some distance threshold is reached without direct input from the user. Use snap points to modify this inertia behavior.
However, in you code, you've disabled horizontal scroll and used buttons to scroll, so snap points won't work and setting HorizontalSnapPointsType property won't have any effect.
I have a custom control which contains one text-block, one combo-box and one hyper-link button.
<UserControl x:Class="IXExpress.Controls.WorkspaceIndexes"
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:telerikSdk="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
Height="Auto" Width="Auto">
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock x:Name="IndexNameTextBlock" Text="{Binding ApplicationStrings.SelectIndexName, Source={StaticResource ResourceWrapper}, Mode=OneTime}" Margin="3,5" TextAlignment="Left" VerticalAlignment="Center" Visibility="Visible"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<telerikSdk:RadComboBox x:Name="IndexNameCB"
DisplayMemberPath="IndexName"
HorizontalAlignment="Center"
IsDropDownOpen="False"
Margin="3,0,3,5"
MinWidth="150"
Width="150"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
Visibility="Visible"
SelectionChanged="IndexNameCB_SelectionChanged"/>
<HyperlinkButton x:Name="CreateNewIndexLink"
Content="Create New"
VerticalContentAlignment="Center"
Click="CreateNewIndexLink_Click"/>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>
I am using it on another page as following:
<StackPanel Orientation="Vertical">
<customControls:WorkspaceIndexes x:Name="WorkspaceIndexes" IsMoreTextRequired="True" Margin="3"/>
</StackPanel>
The issue is, on some condition when I want to disable this control but it only disables combo-box and hyper-link button.
code:
if (my condition)
WorkspaceIndexes.IsEnabled = true;
else
WorkspaceIndexes.IsEnabled = false;
Result:
http://imgur.com/L6tbOwo
I also don't see IsEnabled option for "IndexNameTextBlock" text-block, Why is that?
You can't see the IsEnabled property for the TextBlock because it doesn't have the property. The other Elements are derived from Control, they can be enabled and disabled. The TextBlock is no Control. Disabling a TextBlock would be meaningless. It just displays text. No user interaction possible.
If you need it to be grayed out you have to change either its Foreground color, or reduce its Opacity, or place a semi-transparent Rectangle/Border over it.
I have a user control with some Buttons. Each Button contains text which I'm struggling to align/centre within the control.
The XAML I have is
<UserControl x:Class="ProjectX.DetailedInfo"
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="28" d:DesignWidth="575">
<Grid Height="28" Width="575">
<Button Height="24" HorizontalAlignment="Left" Margin="525,2,0,0" Name="buttonOP1" VerticalAlignment="Top" Width="46" Click="buttonOP1_Click" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="11" />
</Grid>
</UserControl>
But the text is not aligning properly, see below
HorizontalContentAlignment="Center" and VerticalContentAlignment="Center" doesn't seem to be working as expected. Does anyone know why?
(I've checked the text and there's no extra characters)
Thank you
Button content is by default centered in WPF. I would assume that for the buttons that have mis-aligned captions, the text contains spaces after the actual number. But it's hard to tell without you posting all relevant code.
the thing i am battling today is the scrollviewer, and the fact that it blocks my events.SO..here's some xaml:
<ScrollViewer x:Name="scrollv" Panel.ZIndex="15" Margin="8,65.5,0,22" VerticalScrollBarVisibility="Visible" Height="392.5" Background="White" IsHitTestVisible="False">
<Grid x:Name="listaintrebari" Height="Auto" Width="301.5" HorizontalAlignment="Left" VerticalAlignment="Top" Background="White" >
</Grid>
</ScrollViewer>
So the thing is: on the grid which is inside the scrollviewer i programaticly add the questions UserControl...which incidentaly has a button with a click event.My problem is that i cant manage to click the button..it's like the scrollviewer is acting like an invisible shield to protect the usercontrol and the button from the evil Mouse!
Any help apreciated!
EDIT:(this is my questions Usercontrol)
<UserControl
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:eHelper_v3"
mc:Ignorable="d"
x:Class="eHelper_v3.questions"
x:Name="IntrebareControl" Width="330.641" Margin="0" MouseLeftButtonDown="IntrebareControl_MouseLeftButtonDown"
>
<Grid x:Name="LayoutRoot" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="0,0,13,0" Height="90" >
<Rectangle x:Name="rect" Panel.ZIndex="20" Height="90" Stroke="#FF0975A3" >
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#1404BFD8" Offset="0.004"/>
<GradientStop Color="#1300A7FF" Offset="0.996"/>
<GradientStop Color="#2B0F82CC" Offset="0.459"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image x:Name="imagine" HorizontalAlignment="Left" Margin="8,8,0,8" Width="126.667" Stretch="Fill" MouseLeftButtonDown="imagine_MouseLeftButtonDown" />
<TextBlock x:Name="textul" Margin="138.667,8,8,22.5" TextWrapping="Wrap" Text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" FontSize="9.333"/>
<Label x:Name="status" Content="Status" Height="22" Margin="127,0,100,0.5" VerticalAlignment="Bottom" FontSize="9.333" Background="#00894848" Foreground="Red"/>
<Button x:Name="raspundeBtn" Content="Raspunde" HorizontalAlignment="Right" Height="18" Margin="0,0,8,4.5" VerticalAlignment="Bottom" Width="50.974" FontSize="9.333" Click="raspundeBtn_Click"/>
</Grid>
REEDITED ...wrong code inserted...kinda sleepy over here
Perhaps, some control ist in front of your button. To click "through" a control you can use
IsHitTestVisible="false"
Can you post your CommentThat ?
#after your edit:
It seems like your RichTextBox and that FlowDocument lies over the Button.
Add your Button as the last child of your Grid.
The user control is handling the left mouse button so the click does not get to the content.
MouseLeftButtonDown="IntrebareControl_MouseLeftButtonDown"
Does that event get raised?
Just in case someone also has problems with the ScrollViewer preventing mouse button events from firing, I solved this by setting a ZIndex for the corresponding UIElement:
<TextBlock Text="Hello World!" Panel.ZIndex="2" MouseLeftButtonUp="TextBlockMouseLeftButtonUp"/>