I have the following user control
<UserControl x:Class="Kimect.Controls.ElementControl"
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:local="clr-namespace:Kimect"
mc:Ignorable="d" Width="50" Height="50" SizeChanged="UserControl_SizeChanged">
<Grid Name="mainGrid" MouseLeftButtonUp="element_MouseLeftButtonUp" Style="{StaticResource elementGrid}" >
<TextBlock Name="Number" Text="1" FontSize="15" Margin="0 0 2 0"
HorizontalAlignment="Right" VerticalAlignment="Top" />
<TextBlock Name="symbol" Text="H" FontSize="20"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>
Now I want to click on it with Kinect. I've researched and found KinectHoverButton.cs, but I have no clue how to associate the user control to the HoverButton. I'm on Kinect SDK 1.7.
First a side note, Kinect SDK 1.8 is the latest version and does support many new features. If it is possible for you to update to the latest SDK I would suggest looking into it. Among the changes is how you interact with buttons -- replacing the "hover" with a much more intuitive "press" action.
For your KinectHoverButton, I'm assuming you are using the one in the "ControlBasics-WPF" example.
The KinectHoverButton is a subclass of KinectButtonBase, which is turn is a subclass of a regular ButtonBase class. Here is link to the ButtonBase class on MSDN:
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.buttonbase(v=vs.95).aspx
Finally, from the above link you'll notice that ButtonBase is a subclass of ContentControl:
public abstract class ButtonBase : ContentControl
... and you can put (just about) anything inside a ContentControl.
You will not want to ram your UserControl into a KinectHoverButton. Instead you want to create a KinectHoverButton that looks like your UserControl, and behaves as it should when using a gesture environment. You can create a UserControl that contains just a single KinectHoverButton if you want to reuse it.
As a simple example:
<KinectHoverButton>
<Grid>
<TextBlock Name="Number" Text="1" FontSize="15" Margin="0 0 2 0"
HorizontalAlignment="Right" VerticalAlignment="Top" />
<TextBlock Name="symbol" Text="H" FontSize="20"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</KinectHoverButton>
... will create a Kinect enabled button that looks very close (you'll have to play with styling a little bit) to your existing UserControl.
Related
I am trying to make a smooth transition from a closed panel to an open panel and vice versa.
But I don't know how to do it ((
I have an element
<SplitView Style="{StaticResource SplitViewEditMusicTraskStyle}"
CompactPaneLength="0"
PaneBackground="Transparent"
DisplayMode="CompactInline"
IsPaneOpen="{Binding EditPanelIsOpen, Mode=TwoWay}"
OpenPaneLength="308"
Background="Transparent"
PanePlacement="Right">
I could not attach the standard element template because stackoverflov has a limit on the number of characters per stack
How to make a smooth transition from one state to another SplitView UWP
During the testing, if set PanePlacement right, for making SplitView panel open smoothly, please set DisplyMode as Overlay or CompactOverlay.
<SplitView x:Name="splitView" PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
IsPaneOpen="False" OpenPaneLength="328" CompactPaneLength="56" DisplayMode="CompactOverlay">
For your requirement, you could also make pop control and set ChildTransitions as PaneThemeTransition to archive smooth transition from a closed panel to an open panel. For more please refer following code.
Xaml code
<Popup
x:Name="RightMeun"
Width="200"
Height="{Binding ElementName=RootGrid, Path=ActualHeight}"
HorizontalAlignment="Right"
IsOpen="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid
Width="200"
Height="{Binding ElementName=RightMeun, Path=Height}"
Background="LightBlue">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello" />
</Grid>
</Popup>
I took this example of making round glass buttons and make a User Control from it with minimum influence. Third button is my from User Control, all others - original from the example: (sorry, reputation not enough to put images in comfortable way)
But just after I add image to Control I see
Image is added the same way as to second button
<Button Style="{StaticResource GlassButton}" Width="50" Height="50" Background="#FF1D5BBA" Margin="10">
<Image Width="40" Height="35" Source="images\vista_flag.png"/>
</Button>
<GlassButtonControl:GlassButton Width="70" Height="70" Margin="0">
<Image Width="40" Height="35" Source="images\vista_flag.png"/>
</GlassButtonControl:GlassButton>
Full solution
What am I doing wrong?
EDIT1 -> EDIT3
EDIT2:
as Peter Duniho sujested, minimal code for reproduce case
UserControl project's XAML. Button with colored background:
<UserControl x:Class="GreenButtonControl.GreenButton"
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:local="clr-namespace:GreenButtonControl"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="400">
<Grid>
<Button Width="50" Height="50" Background="Green" Margin="10"/>
</Grid>
</UserControl>
UserControl project's C#:
using System.Windows.Controls;
namespace GreenButtonControl
{
public partial class GreenButton : UserControl
{
public GreenButton()
{
InitializeComponent();
}
}
}
Window XAML (image itself should be changed to any existsing with transparency):
<GreenButtonControl:GreenButton Width="50" Height="50">
<Image Width="40" Height="40" Source="images\vista_flag.png"/>
</GreenButtonControl:GreenButton>
The problem is that UserControl disapear and Window backround is shown under the transparent image.
EDIT3:
Solutions I found for now to avoid such a behaviour:
Place Image in UserControl code and make parameter to set it from Window code.
Place image not inside a control, but over it:
<Grid Width="70" Height="70">
<GlassButtonControl:GlassButton/>
<Image Width="40" Height="40" Source="images\vista_flag.png"/>
</Grid>
But that's bring new problems to catch triggers "MouseOver" and others...
Place UserControl in container and make Image transparent to Mouse events
<Grid Width="50" Height="50">
<GreenButtonControl:GreenButton Width="Auto" Height="Auto"/>
<Image Width="40" Height="40" IsHitTestVisible="False" Source="images\vista_flag.png"/>
</Grid>
That's perfect decision for required behaviour for now
But the question still is. Why any internal Element makes UserControl invisible?
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
I was trying to use the settings flyout in phone 8.1 runtime to produce a settings screen for an app. However the compiler is throwing an error and I dont no why. This would have worked fine in phone 8.0 but not 8.1 runtime it seems.
<SettingsFlyout
x:Class="popcornpk.Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:popcornpk"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
IconSource="Assets/SmallLogo.png"
Title="CustomSetting" >
<!-- This StackPanel acts as a root panel for vertical layout of the content sections -->
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<!-- Toggle switch -->
<StackPanel >
<TextBlock Text="Toggle Switch" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use toggle switches to let users set Boolean values." Style="{StaticResource BodyTextBlockStyle}"/>
<ToggleSwitch Margin="-6,0,0,0" Header = "Download updates automatically" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/>
<ToggleSwitch Margin="-6,0,0,0" Header = "Install updates automatically" HorizontalAlignment="Stretch"/>
</StackPanel>
<!-- Button -->
<StackPanel >
<TextBlock Text="Push button" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="Button label" Style="{StaticResource BodyTextBlockStyle}"/>
<Button Margin="-3,0,0,0" Content="Clear"/>
<TextBlock Margin="0,0,0,25" Text="With a push button, users initiate an immediate action." Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
<!-- ComboBox -->
<StackPanel >
<TextBlock Text="ComboBox" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use the ComboBox to allow users to select one item from a set of text-only items." Style="{StaticResource BodyTextBlockStyle}"/>
<ComboBox Header="State:" Margin="0,7,0,0" SelectedIndex="0" HorizontalAlignment="Left">
<ComboBoxItem Content="Washington"/>
<ComboBoxItem Content="Oregon"/>
<ComboBoxItem Content="California"/>
</ComboBox>
</StackPanel>
<!-- HyperlinkButton -->
<StackPanel >
<TextBlock Text="Hyperlink" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use a hyperlink when the associated action will take the user out of this flyout." Style="{StaticResource BodyTextBlockStyle}"/>
<HyperlinkButton Padding="-5,0,0,0" Content="View privacy statement" Tag="http://privacy.microsoft.com" HorizontalAlignment="Left"/>
</StackPanel>
<!-- TextBox -->
<StackPanel >
<TextBlock Text="TextBox" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Use a TextBox to allow users to enter text." Style="{StaticResource BodyTextBlockStyle}"/>
<StackPanel Margin="0,7,0,0" Orientation="Horizontal">
<TextBox HorizontalAlignment="Left" Width="150"/>
<Button Margin="20,0,0,0" Content="Add"/>
</StackPanel>
</StackPanel>
<!-- RadioButton -->
<StackPanel>
<TextBlock Text="Radio button group" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Margin="0,0,0,25" Text="Lets users choose one item from a small set of mutually exclusive, related options." Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Video quality" Style="{StaticResource BodyTextBlockStyle}"/>
<RadioButton Margin="0,7,0,0" Content="High"/>
<RadioButton Margin="0,17,0,0" Content="Medium"/>
<RadioButton Margin="0,17,0,0" Content="Low"/>
</StackPanel>
</StackPanel>
Severity Code Description Project File Line
Error CS0263 Partial declarations of 'Settings' must not specify different base classes popcornpk C:\Users\david\Documents\Visual Studio 2015\81StoreLiveAppsPhoneOnlyLIVE\popcornpk\popcornpkhub\popcornpk\popcornpk\obj\Debug\Settings.g.i.cs 15
My base class is just the same as other pages
Note 2
public partial class Settings : Page
I changed above to settings and it compiled but the flyount did not work or popup so it didnt any idea as to why it didnt.
Note 2
To Avoid confusion I dont want a base page of page I wanted to be able to use the settingsflyout that was part of 8.0 apparently microsoft have dicthced this though for 8.1 UAP
The exception tells you everything you need to know.
Look at your xaml. Here's the top two lines of your file:
<SettingsFlyout
x:Class="popcornpk.Settings"
This says that you're declaring a new class called popcornpk.Settings (btw, namespaces should be PascalCased) that extends the base class SettingsFlyout.
When you add a new xaml file to your application, it actually creates three files--the .xaml file, a .xaml.cs file that you edit, and a mysterious ephemeral .g.i.cs file that holds designer-generated code (e.g., the implementation of InitializeComponent()).
The .xaml.cs and .g.i.cs files are partial class files, and are combined by the compiler. Note what the exception message says--
Partial declarations of 'Settings' must not specify different base classes
What are these different base classes?
Well, from the xaml, we can see the first one--SettingsFlyout.
From your snippet,
public partial class Settings : Page
We see the other base class--Page.
Not sure how you screwed that up, but the simple fix is to remove the base class declaration from your .xaml.cs file:
public partial class Settings
{
// snip
Apart from what Will has said about partial classes, which will surely solve the error, you probably won't be able to use SettingsFlyout on Phone - following the remarks:
Caution SettingsFlyout is supported only for use with the SettingsPane in Windows 8. While the SettingsFlyout type is visible in Windows Phone projects, SettingsPane is not present on Windows Phone, so use of SettingsFlyout is not supported.
This question already has answers here:
WPF: template or UserControl with 2 (or more!) ContentPresenters to present content in 'slots'
(3 answers)
Closed 3 years ago.
I have a custom ControlTemplate for a WPF TabControl that adds Buttons to the left and right hand side of the TabItem header. At the moment this is not a named part as the button commands are bound in the ControlTemplates XAML and do not need to be exposed outside of the ControlTemplate.
This works fine for a button but what if I want to add content to the left (or right) hand side of the TabItemHeaders which can be bound outside of the ControlTemplate so that my TabControl becomes more flexible?
My idea was to subclass the TabControl and have two named parts in the ControlTemplate and expose these as properties of the new control; CustomTabControl.LeftContentArea and CustomTabControl.RightContentArea respectively. Each named part is a ContentPresenter and each ContentPresenters Content property is exposed by the properties named above.
However, when I tried this I was unable to put content into the left and right content areas.
Edit: Just to be clear I have included an image. The red rectangles show where I want to be able to place extra content.
Update: Below is a screen shot of the progress I have made so far, hopefully this will help explain my problem a bit more.
The screen shot shows my custom Tab Control with two blank tabs and three buttons that are currently on the right hand side of the TabItem header area. The buttons are currently defined in the TabControls custom ControlTemplate I.E. there is a ColumnDefinition within the ControlTemplates Grid which contains a StackPanel that hosts 3 buttons.
What I am looking for is a way to allow the consumer of the tab control decide what content goes in the area next to the tabs. E.G. the user should be able to do something like this:
<local:CustomTabControl>
<local:CustomTabControl.RightContentArea>
<!-- This can be changed to ANY content that the user wants -->
<StackPanel Orientation="Horizontal">
<Button Content="Test" />
<Button Content="Test" />
<Button Content="Test" />
</StackPanel>
</local:CustomTabControl.RightContentArea>
<!-- TabItems are added as normal -->
<TabItem Header="Tab One" />
<TabItem Header="Tab Two" />
</local:CustomTabControl>
I tried a different (lazy) way, which was to create another grid that occupies the same space as the TabControl, ie both are in Grid.Row=0. I have bound the grid height to the height of the first tab so if the tabs change height the other controls will remain centered. I set MinWidth on the window so the controls dont overlap the tabs.
Paste this code into a new WPF Window...
<Window x:Class="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"
mc:Ignorable="d"
Title="MainWindow" Height="306" Width="490" MinWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TabControl Grid.Row="0" x:Name="tabControl">
<TabItem x:Name="tabItem" Header="TabItem" Height="50">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
<Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}"
VerticalAlignment="Top" Margin="0,2,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="20,0">
<TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16"
Foreground="Red" FontFamily="Calibri">My Text</TextBlock>
<Button Content="My Button" />
</StackPanel>
</Grid>
</Grid>
</Window>
...and you will get this:
Depending on how much flexibility you need there are some methods that are suited better than others, i myself try to use DynamicResources if possible because it is normally less troublesome than creating new user-controls.
Here's an example of how to add additional content to the left of the Tab-Header:
<TabControl>
<TabControl.Resources>
<DataTemplate x:Key="AugmentedTabItem">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/>
<ContentPresenter Content="{Binding}"/>
</StackPanel>
</DataTemplate>
</TabControl.Resources>
<TabItem Header="ÜberTab" HeaderTemplate="{StaticResource AugmentedTabItem}">
<TabItem.Resources>
<TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>
</TabItem.Resources>
</TabItem>
</TabControl>
Hope that helps, if something is unclear or if this doesn't suffice, drop a comment.