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?
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
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.
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.
I have a WPF window that hosts a simple layout of a home button, top row of buttons and a video feed
but when I maximise the window. the layout is out of sync with the standard view.
I have tried to remedy some of the layout by setting the image element to stretch "fill" but the top row of buttons don't look uniform also the home button relocates to the center of the screen which doesn't look good
My question I how would I adjust the xaml layout properties to support standard and maximised view?
This is the layout for the window:
<Window x:Class="KinectKickboxingBVversion1.TrainingFrm"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TrainingFrm" Height="377.612" Width="637.313" Loaded="Window_Loaded">
<Grid>
<StackPanel Orientation="Horizontal" >
<Button x:Name="jabBtn" Background="BlueViolet" Content="Jab" Width="100" Height="50" Click="jabBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="crossBtn" Background="BlueViolet" Content="Cross" Width="100" Height="50" Click="crossBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="jabCrossHookBtn" Background="BlueViolet" Content="Jab-Cross-Hook" Width="100" Height="50" Click="jabCrossHookBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
<Button x:Name="pKickBtn" Content="Push Kick" Background="BlueViolet" Width="100" Height="50" Click="pKickBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
<Button x:Name="blockBtn" Content="Kick Block" Background="BlueViolet" Width="100" Height="50" Click="blockBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
<Label Content="SCORE: " x:Name="lblScore" Visibility="Collapsed"/>
<TextBlock x:Name="tblkScore" />
</StackPanel>
<Viewbox Grid.Row="1" Stretch="Uniform" HorizontalAlignment="Center">
<Image x:Name="KinectVideo" Width="640" Height="250" Visibility="Visible" Stretch="Fill" />
</Viewbox>
<Button x:Name="homeBtn" Content="" Width="50" Click="homeBtn_Click" Height="35" Margin="272,294,277,10" >
<Button.Background>
<ImageBrush ImageSource="Images/ContentIcon.png" />
</Button.Background>
</Button>
</Grid>
</Window>
Your buttons are all a fixed size. StackPanel just plonks them next to each other, so when your screen size is bigger, you end up with space left over on the right.
Same with your home button. It's being positioned via the absolute margins.
You could make your layout fluid by using 6 grid columns for the top buttons, and removing the margins on the home button and just setting it to HorizontalAlignment="Center" VerticalAlignment="Bottom".
However, this will still result in effectively smaller text on the buttons. If you want the display to always have the same proportions it may be easier for you to simply plonk the whole thing in a ViewBox.
use grid instead of stackpanel and set the column width to "*" and put your buttons in that grid
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.