Controls in WPF sticking together when resizing - c#

Hello i am newbies in WPF and i have some problems with designing my UI.
In the design view, i have this:
http://i.stack.imgur.com/papJ2.png
And this is my XAML code:
<mui:ModernWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:awe="http://schemas.awesomium.com/winfx" x:Name="___No_Name_" mc:Ignorable="d" x:Class="JJADesign.MainWindow"
Title="mui"
LogoData="F1 M 24.9015,43.0378L 25.0963,43.4298C 26.1685,49.5853 31.5377,54.2651 38,54.2651C 44.4623,54.2651 49.8315,49.5854 50.9037,43.4299L 51.0985,43.0379C 51.0985,40.7643 52.6921,39.2955 54.9656,39.2955C 56.9428,39.2955 58.1863,41.1792 58.5833,43.0379C 57.6384,52.7654 47.9756,61.75 38,61.75C 28.0244,61.75 18.3616,52.7654 17.4167,43.0378C 17.8137,41.1792 19.0572,39.2954 21.0344,39.2954C 23.3079,39.2954 24.9015,40.7643 24.9015,43.0378 Z M 26.7727,20.5833C 29.8731,20.5833 32.3864,23.0966 32.3864,26.197C 32.3864,29.2973 29.8731,31.8106 26.7727,31.8106C 23.6724,31.8106 21.1591,29.2973 21.1591,26.197C 21.1591,23.0966 23.6724,20.5833 26.7727,20.5833 Z M 49.2273,20.5833C 52.3276,20.5833 54.8409,23.0966 54.8409,26.197C 54.8409,29.2973 52.3276,31.8106 49.2273,31.8106C 46.127,31.8106 43.6136,29.2973 43.6136,26.197C 43.6136,23.0966 46.127,20.5833 49.2273,20.5833 Z"
Style="{StaticResource BlankWindow}" d:DesignHeight="1055" d:DesignWidth="1400" WindowStartupLocation="CenterScreen" WindowStyle="SingleBorderWindow">
<DockPanel>
<TabControl DockPanel.Dock="Top" Height="69">
<TabItem Header="TabItem">
<Grid Margin="0,0,0,1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="466*"/>
</Grid.ColumnDefinitions>
<TextBox HorizontalAlignment="Left" Height="23" Margin="147,4,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="218"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="95,3,0,0" VerticalAlignment="Top" Width="170" Grid.Column="1"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="370,3,0,0" VerticalAlignment="Top" Width="170" Grid.ColumnSpan="2"/>
<Label Content="Saisir une produit JJA" HorizontalAlignment="Left" Width="100" Margin="15,7,335,5" />
</Grid>
</TabItem>
<TabItem Header="TabItem">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="676*"/>
</Grid.ColumnDefinitions>
</Grid>
</TabItem>
</TabControl>
<awe:WebControl DockPanel.Dock="Bottom" Source="http://www.google.com/"/>
</DockPanel>
</mui:ModernWindow>
But when i run my application, i got this:
Normal:
http://i.stack.imgur.com/IH300.png
How can i make the control not sticking together?

You have the items in the tab grouped in a <grid>, but are using absolute margins to position them within the grid.
Try using the stackpanel with margins on the items inside it, like this :
<TabItem Header="TabItem">
<StackPanel Orientation="Horizontal" Margin="0,0,0,1">
<TextBox HorizontalAlignment="Left" Height="23" margin="0,0,10,0" TextWrapping="Wrap" Text="TextBox" Width="218"/>
<Button Content="Button" margin="0,0,10,0" Width="170" />
<Button Content="Button" margin="0,0,10,0" Width="170" />
<Label Content="Saisir une produit JJA" Width="100" />
</StackPanel>
</TabItem>

Related

StackPanel not showing up when running UWP app (C#)

I am taking my first steps into UWP app development as I'm tired of any non-web development I do (e.g. WinForms) looking like something from 1995 no matter how I try to pretty it up.
I have been mucking around and produced using the designer, a page with an image, and a stackpanel filled with buttons. The designer view shows the stackpanel fine
And this is my XAML
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="48,10,0,0">
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" Margin="200,86,1113,247" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
</Page>
However, when I run the app, the stackpanel doesn't show up (nor do any of the buttons inside it). I'm stumped. I tried setting the stackpanel "To Front" in terms of order, but no dice. Clearly my novice skills are showing.
Help?
It may be because you are setting the position of your controls with the margin attribute.
Try to read a bit into the different layout types like Grid StackPanel or RelativePanel.
A good introduction can be found here.
Just a basic thing you can do is something like this:
<Grid>
<Grid.RowDefinitions>
<Rowdefinition Height="*"> //The * just fills in the remaining Screen space.
<Rowdefinition Height="500"> //This Row is 500px high
<Rowdefinition Height="*"> //Fills the rest of the screen (same as first row)
<Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Height="*">
<ColumnDefinition Height="500">
<ColumnDefinition Height="2*"> //Using 2* fills double the screen as *
<Grid.ColumnDefinitions>
<StackPanel Grid.Row="1"
Grid.Column="1"> //Row and Column are 0-indexed
//Elements to stack go in here
</StackPanel>
If you need more info or a bit more detailed example just tell me. I just have to wait until I'm home to have acces to UWP code.
Your problem is here:
Margin="200,86,1113,247"
The designer things the target device has far more pixels than the actual device its running on. Dont forget these are 'effective pixels' so just because your screen may be 4k doesnt mean its 4000 pixels wide in UWP terminology.
Try here for more info
https://learn.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro#effective-pixels-and-scaling
To fix this in your page XAML you need to specify the width and height of the design surface (d:DesignHeight="..." d:DesignWidth="...") - like this:
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
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"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
there are some editable code I'm splitting with "<--((**))-->" :
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" <--((Margin="200,86,1113,247"))--> HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
YOUR PROBLEM
you are designing (developing) resolution is bigger than target device (window)
try this:
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>

UI Elements disappearing from WPF at runtime

I am developing a WPF application that allows to connect two peers in a video chat. I have been designed the UI in the XAML designer for the last two months and everything went fine, when I ran the application it did show everything etc. Until yesterday, for absolutely no apparent reason.
Some part of the UI just does not show up anymore WHEN the code is running on another laptop. I insist on the fact that it did work before and now not anymore. I also did not change anything in the code that could have anything to do with that part of the UI, nor in the xaml.
I did check that I never mess up with any Visibility parameter in the code-behind as well, so I don't see any reason why the behavior of the application suddenly changed.
Does anyone have an idea why this would happen?
Here is the xaml:
<Window x:Class="RealSenseiConfFusion.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="1000" Width="1500"
WindowStartupLocation="Manual"
Left="0" Top="0"
Closing="Window_Closing"
Loaded="Window_Loaded" >
<Grid Background="LightSteelBlue">
<Rectangle Margin="10,10,498.6,0" Name="rectangle1" Stroke="Black" RadiusX="9" RadiusY="9" Fill="LightSlateGray" Height="142" VerticalAlignment="Top" />
<Grid Name="callAndSyncGrid" Margin="26,24,1165,835" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">ABOUT CALL</TextBlock>
<TextBlock Name="myIpTextBlock">Your ip is:</TextBlock>
<Grid Name="callGrid">
<TextBox Height="23" HorizontalAlignment="Left" Name="txtIP" Background="GhostWhite" Foreground="Black" Width="221" />
<Button Height="23" HorizontalAlignment="Right" Name="btnCall" Width="75" Click="btnCall_Click">Call</Button>
</Grid>
<Button Name="btnSync" Content="Start Synchronization" HorizontalAlignment="Left" Width="120" Height="25" Click="btnSynchronize_Click"/>
<TextBlock Name="currentConvText"></TextBlock>
</StackPanel>
</Grid>
<Grid Name="visSetupGrid" Margin="650,24,515,835" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">VISUALIZATION SETUP</TextBlock>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 1:</TextBlock>
<ComboBox Name="vis1Combo" HorizontalAlignment="Right">
<ComboBoxItem IsSelected="True">Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 2:</TextBlock>
<ComboBox Name="vis2Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 3:</TextBlock>
<ComboBox Name="vis3Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Button Name="btnVisApply" HorizontalAlignment="Center" Click="btnVisApply_Click">Apply!</Button>
</StackPanel>
</Grid>
<Grid Name="otherPeerVideo" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1000" Height="700" Margin="0,83,0,0">
<Grid Width="960" Height="540">
<Border BorderBrush="DarkOrange" BorderThickness="4">
<WindowsFormsHost Name="wfServer"/>
</Border>
</Grid>
</Grid>
<StackPanel Name="feedbackAndMyVideoStackPanel" Background="WhiteSmoke" Margin="1000,83,0,0" VerticalAlignment="Top" Width="454" Height="800">
<Grid Name="vis1Grid" Height="160"></Grid>
<Grid Name="vis2Grid" Height="160"></Grid>
<Grid Name="vis3Grid" Height="160"></Grid>
<Grid Name="myVideoGrid" VerticalAlignment="Bottom" Height="320">
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="454" Height="300">
<Border BorderBrush="Blue" BorderThickness="4">
<WindowsFormsHost Name="myVideo" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="446" Height="292"/>
</Border>
</Grid>
<Button Name="myVideoHideButton" Click="myVideoHideButton_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="80" Height="20">Hide/Unhide</Button>
</Grid>
</StackPanel>
</Grid>
Here is a screenshot of how it looks like in the designer (on both machines):
Here is a screenshot of how it looks like when the application is running on my machine:
And here a screenshot of how it looks like when the application is running on the laptop:
I compiled/tried your code.
When the window gets small, many components disappear.
Because of the margins.
Example of margins replacement
Before :
With margins for placement
<Grid Name="callAndSyncGrid" Margin="26,24,1165,835" Background="LightGray">
<!-- ... -->
</Grid>
<Grid Name="visSetupGrid" Margin="650,24,515,835" Background="LightGray">
<!-- ... -->
</Grid>
After
With margins for "breathing"
Placement is made with two columns (ColumnDefinitions and Grid.Column="1"; 0 by default).
Here each Column takes 50 % (50*) of the available room.
You can also express the size as "Auto" or 323 (hardcoded size)
<Grid Name="parentGridForLayout" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Grid Name="callAndSyncGrid" Margin="10" Background="LightGray">
<!-- ... -->
</Grid>
<Grid Name="visSetupGrid" Margin="10" Background="LightGray">
<!-- ... -->
</Grid>
</Grid>
Advice
Using Grid+margin or Canvas are pretty close approaches. But with Grid you can create Columns and Rows to organize layout. And you can compose Grids(or other Panels like StackPanels, DockPanels, WrapPanels) into Grids for organizing the layout.
Disclaimer :
My piece of code alone is not enough.
You need to organize all your GUI, with many panels.
I would recreate the window from scratch : empty page, then put a first Grid (or any suitable Panel), split it with columns or rows. Then put some content imported from previous window at the grid level then go in the children grid to put some more grids/imported content
Regards
As #HighCore and #Emmanuel DURIN pointed out, the problem was that I defined the layout with Margins, which can lead to big trouble if I run the application on different screen sizes.
To correct this, I used Canvas'es in order to place every element with respect to their containers.
Now I can use the application on different screens and everything gets displayed as I want it.
Here the better layouted UI for reference:
<Window x:Class="RealSenseiConfFusion.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="860" Width="1500"
WindowStartupLocation="Manual"
Left="0" Top="0"
Closing="Window_Closing"
Loaded="Window_Loaded" >
<Grid Background="LightSteelBlue">
<Canvas>
<Canvas Canvas.Top="10" Canvas.Left="10" Width="980" Height="142">
<Rectangle Width="980" Height="132" Name="rectangle1" Stroke="Black" RadiusX="9" RadiusY="9" Fill="LightSlateGray" VerticalAlignment="Top" />
<Grid Name="callAndSyncGrid" Canvas.Top="15" Canvas.Left="15" Width="200" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">ABOUT CALL</TextBlock>
<TextBlock Name="myIpTextBlock">Your ip is:</TextBlock>
<Grid Name="callGrid">
<TextBox Height="23" HorizontalAlignment="Left" Name="txtIP" Background="GhostWhite" Foreground="Black" Width="221" />
<Button Height="23" HorizontalAlignment="Right" Name="btnCall" Width="75" Click="btnCall_Click">Call</Button>
</Grid>
<Button Name="btnSync" Content="Start Synchronization" HorizontalAlignment="Left" Width="120" Height="25" Click="btnSynchronize_Click"/>
<TextBlock Name="currentConvText"></TextBlock>
</StackPanel>
</Grid>
<Grid Name="visSetupGrid" Canvas.Top="15" Canvas.Right="15" Width="200" Background="LightGray">
<StackPanel>
<TextBlock HorizontalAlignment="Center">VISUALIZATION SETUP</TextBlock>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 1:</TextBlock>
<ComboBox Name="vis1Combo" HorizontalAlignment="Right">
<ComboBoxItem IsSelected="True">Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 2:</TextBlock>
<ComboBox Name="vis2Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem>Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Grid>
<TextBlock HorizontalAlignment="Left"> Visualization block 3:</TextBlock>
<ComboBox Name="vis3Combo" HorizontalAlignment="Right">
<ComboBoxItem>Vis1UC1</ComboBoxItem>
<ComboBoxItem>Vis1UC1_2</ComboBoxItem>
<ComboBoxItem IsSelected="True">Vis1UC2</ComboBoxItem>
<ComboBoxItem>Vis1UC2_2</ComboBoxItem>
<ComboBoxItem>Vis2UC1</ComboBoxItem>
<ComboBoxItem>Vis2UC2</ComboBoxItem>
<ComboBoxItem>Vis2UC3</ComboBoxItem>
<ComboBoxItem>Vis3UC1</ComboBoxItem>
<ComboBoxItem>Vis3UC2</ComboBoxItem>
<ComboBoxItem>Vis3UC3</ComboBoxItem>
</ComboBox>
</Grid>
<Button Name="btnVisApply" HorizontalAlignment="Center" Click="btnVisApply_Click">Apply!</Button>
</StackPanel>
</Grid>
</Canvas>
<Grid Name="otherPeerVideo" HorizontalAlignment="Left" Canvas.Top="150" Canvas.Left="20">
<Grid Width="960" Height="540">
<Border BorderBrush="DarkOrange" BorderThickness="4">
<WindowsFormsHost Name="wfServer"/>
</Border>
</Grid>
</Grid>
<StackPanel Name="feedbackAndMyVideoStackPanel" Background="WhiteSmoke" Canvas.Right="15" Canvas.Top="15" VerticalAlignment="Top" Width="454" Height="800">
<Grid Name="vis1Grid" Height="160"></Grid>
<Grid Name="vis2Grid" Height="160"></Grid>
<Grid Name="vis3Grid" Height="160"></Grid>
<Grid Name="myVideoGrid" VerticalAlignment="Bottom" Height="320">
<Grid HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="454" Height="300">
<Border BorderBrush="Blue" BorderThickness="4">
<WindowsFormsHost Name="myVideo" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="446" Height="292"/>
</Border>
</Grid>
<Button Name="myVideoHideButton" Click="myVideoHideButton_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Width="80" Height="20">Hide/Unhide</Button>
</Grid>
</StackPanel>
</Canvas>
</Grid>

How to supress children from invoking parent's event?

I'm creating simple touch-based user comtol web browser. I'm using ManipulationDelta event to pan, zoom-in, zoom-out etc. The browser (Awesomium WebControl) is placed inside a grid of control. When I try to scroll page whole browser moves. How to supress invoking parent's event by childen?
I've set userinput type to ViewInput.Mouse because I want to handle touch by myself.
XAML:
<UserControl
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:awe="http://schemas.awesomium.com/winfx" x:Name="_control" x:Class="WebControlTouch.WebBrowser"
mc:Ignorable="d" d:DesignWidth="497" Height="323.333">
<Grid TouchDown="_mainGrid_TouchDown" x:Name="_mainGrid" Background="Honeydew" Grid.Row="0" Margin="0,0,-66,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*"/>
<ColumnDefinition Width="466*"/>
<ColumnDefinition Width="8*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="84*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="220*"/>
<RowDefinition Height="12*"/>
</Grid.RowDefinitions>
<awe:WebControl TouchDown="_browser_TouchDown" Visibility="Visible" LoadingFrameFailed="_browser_LoadingFrameFailed" LoadingFrameComplete="_browser_LoadingFrameComplete" LoadingFrame="_browser_LoadingFrame" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="_browser" AddressChanged="_browser_AddressChanged" Width="Auto" Height="Auto" Grid.Row="2" Grid.Column="1" Margin="0,0,1,0"/>
<TextBox Grid.Row="0" HorizontalAlignment="Left" Name="_addressBar" Height="43" Margin="0,10,0,0" TextWrapping="Wrap" Text="Address" VerticalAlignment="Top" Width="146" Grid.ColumnSpan="2"/>
<Button x:Name="_goButton" Grid.Row="0" TouchDown="Button_TouchDown" Content="Go!" HorizontalAlignment="Left" Margin="131,10,0,0" VerticalAlignment="Top" Width="132" RenderTransformOrigin="-0.164,0.514" Height="43" Click="Button_Click" Grid.Column="1"/>
<Button TouchDown="Btn_back" x:Name="_btnBack" Content="Back" Click="Btn_back" HorizontalAlignment="Left" Margin="276,10,0,0" VerticalAlignment="Top" Width="75" Grid.Column="1" Height="20"/>
<Button TouchDown="_btn_forward" x:Name="_btnForward" Content="Forward" HorizontalAlignment="Left" Margin="365,10,0,0" VerticalAlignment="Top" Width="75" Click="_btn_forward" Grid.Column="1" Height="20"/>
<Label x:Name="_Status" Content="Ready" Margin="277,42,130,16" VerticalAlignment="Center" Grid.Column="1" Height="26"/>
<Button x:Name="_exitButton" Content="Exit!" Grid.Column="1" HorizontalAlignment="Left" Margin="365,45,0,0" VerticalAlignment="Top" Width="75" TouchDown="_exitButton_TouchDown"/>
<Button x:Name="_temp" Content="Scroll" Grid.Column="1" HorizontalAlignment="Left" Margin="459.312,10.04,0,0" VerticalAlignment="Top" Width="75" Click="_tempClick"/>
</Grid>
</UserControl>
This means you want some event(s) to stop bubbling (up) the control hierarchy.
All you should usually need to do is marked the event as handled (the event instance you get in your event handler):
e.Handled = true;
In your case should be something like:
private void _browser_TouchDown(object sender, TouchEventArgs e)
{
//...
e.Handled = true;
//...
}

C# Strange WPF Combobox Behavior

I have simple window.
This is what happens when I click ComboBox:
List appears in upper left corner of screen instead of under Combobox.
XAML:
<Window x:Class="WpfPortOfTestingCamera.VideoSettings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Video Settings" WindowStartupLocation="CenterOwner" ResizeMode="NoResize" ShowInTaskbar="False" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" SizeToContent="WidthAndHeight" d:DesignHeight="167">
<StackPanel Name="stackPanel1" VerticalAlignment="Top" HorizontalAlignment="Center">
<GroupBox Header="Settings" Name="groupBox1">
<Grid Name="grid1" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="175*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Resolution:" Height="28" Name="label1" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Label Content="Framerate:" Height="28" HorizontalAlignment="Left" Margin="0" Name="label2" VerticalAlignment="Center" Grid.Row="1" />
<ComboBox Grid.Column="1" Height="23" HorizontalAlignment="Left" Margin="0" Name="comboBox1" VerticalAlignment="Center" Width="150" SelectionChanged="comboBox1_SelectionChanged" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="0" Name="comboBox2" VerticalAlignment="Center" Width="150" Grid.Column="1" Grid.Row="1" SelectionChanged="comboBox2_SelectionChanged" />
</Grid>
</GroupBox>
<Label Name="labelSelectedSize" Content="Size # FPS" />
<Button Name="button1" Content="Apply" Click="button1_Click" />
</StackPanel>
</Window>
Instead of opening it directly in the Loaded event, just queue another message on the Dispatcher to open it.
I ran into exactly this and just posted an example at WPF ComboBox DropDown part appears in the wrong place which worked for me. The interested reader can go there to peruse my commentary, but here's the snippet (NOTE: WindoBaseLoadedHandler is the "Loaded=" handler specified in the XAML):
protected void WindowBaseLoadedHandler(object sender, RoutedEventArgs e)
{
...non-essential lines of code removed...
if (DataContext != null)
{
Dispatcher.BeginInvoke(DispatcherPriority.Normal, new Action(() =>
{
this.IsEnabled = false;
LoginDlg loginDlg = new LoginDlg();
loginDlg.ShowDialog();
if (!loginDlg.Success)
{
/*-----------------------------------
* Log on failed -- terminate app...
*----------------------------------*/
...termination logic removed...
}
this.IsEnabled = true;
}));
}

How to set a datatable to a WPF datagrid C#?

I'm new to c# so go easy.
Basically I build a data table ( and I have verified it's not empty) but it doesn't seem to get displayed in my wpf datagrid... I used this example here and applied it:link text
My datagrid remains blank.
Does that example look fine to you guys?
here is my code:
XACML:
<Window x:Class="WpfApplication1.TickerSearch"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TickerSearch" Height="468" Width="907">
<Grid Background="#E6000000" Name="_grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="244*" />
<ColumnDefinition Width="37*" />
</Grid.ColumnDefinitions>
<TextBox Height="34" HorizontalAlignment="Left" Margin="26,15,0,0" Name="txtSearchTker" VerticalAlignment="Top" Width="225" Grid.ColumnSpan="2" />
<Button Content="Search" Height="32" HorizontalAlignment="Left" Margin="76,160,0,0" Name="btnSearch" VerticalAlignment="Top" Width="124" Click="btnSearch_Click" />
<ListBox Height="114" HorizontalAlignment="Left" Margin="26,224,0,0" Name="lstResults" VerticalAlignment="Top" Width="225" Visibility="Hidden" Grid.ColumnSpan="2" Background="#FFFFB000" />
<Button Content="Select" Height="32" HorizontalAlignment="Left" Margin="76,366,0,0" Name="btnSelect" VerticalAlignment="Top" Width="124" Visibility="Hidden" />
<Label Content="Start Date: " Height="25" HorizontalAlignment="Left" Margin="22,65,0,0" Name="label1" VerticalAlignment="Top" Width="71" Background="#00FFB000" FontFamily="Georgia" Foreground="#FFFFB000" />
<Label Content="End Date:" Height="27" HorizontalAlignment="Left" Margin="22,93,0,0" Name="label2" VerticalAlignment="Top" Width="71" Background="#00FFB000" FontFamily="Georgia" Foreground="#FFFFB000" />
<DatePicker Height="22" HorizontalAlignment="Left" Margin="93,65,0,0" Name="dateFrom" VerticalAlignment="Top" Width="138" />
<DatePicker Height="22" HorizontalAlignment="Left" Margin="93,94,0,0" Name="toDate" VerticalAlignment="Top" Width="138" />
<Label Content="Just Today" Height="27" HorizontalAlignment="Left" Margin="22,122,0,0" Name="label3" VerticalAlignment="Top" Width="71" Background="#00FFB000" FontFamily="Georgia" Foreground="#FFFFB000" />
<CheckBox Content="CheckBox" Height="17" HorizontalAlignment="Left" Margin="93,127,0,0" Name="chkBoxToday" VerticalAlignment="Top" Width="15" />
<DataGrid AutoGenerateColumns="False" Height="315" HorizontalAlignment="Left" Margin="285,68,0,0" x:Name="_dataGrid" VerticalAlignment="Top" Width="468" ItemsSource="{Binding Path=.}" Background="#C6F7F700"></DataGrid>
</Grid>
c#:
_ds = new DataSet();
DataTable table = yahooFinance.lookupSymbol();
_ds.Tables.Add(table);
_grid.DataContext = _ds.Tables[0];
Change it to ItemsSource="{Binding}".
Also, set AutoGenerateColumns to true. (Or explicitly specify columns)
Without seeing any code, I'd suggest the two most important points are:
setting the DataContext with myGrid.DataContext = myDS.Tables[0];
having your XAML DataGrid include the ItemsSource property:
<dg:DataGrid ItemsSource="{Binding Path=.}"

Categories