We Keep Coding

UI Elements disappearing from WPF at runtime - c#

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>

Related

This question already has an answer here:
How do I place a text over a image in a button in WinRT
(1 answer)
Closed 5 years ago.
I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)
What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar to this post but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.
Essentially, what I've got until now is something like this: (I've shared my code down below)
But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)
So this is what I've tried so far... I've also tried the relative panel but no luck...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>
My complete code looks something like this for this page.
<Page
x:Class="VaultManager.Terminal.Views.MainPage"
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">
<Grid Background="Black">
<Hub SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Header="Overview">
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<RelativePanel>
<TextBlock>Column 0 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</RelativePanel>
</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 1 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<StackPanel>
<TextBlock>Column 1 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Videos" Name="Videos">
<!-- yada yada -->
</HubSection>
<HubSection Header="Audios" Name="Audios">
<!-- blah blah -->
</HubSection>
</Hub>
</Grid>

Good job giving us all that info. You may want to take a look here since the asker in that question seems to have had a similar issue. The answerer suggested using a Grid instead of a StackPanel. Hope that helps. After that, you should be able to adjust the transparency of the text. If you are using visual studio you can just click on the text element and adjust the background brush from the Properties tab. The button w/ the image should look like this:
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text = "Column 0 Item 1">
<TextBlock.Background>
<SolidColorBrush Color="(**Colour here**)" Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
</TextBlock.Background></TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
</Button>

I am new to WPF,and have written a simple hello world type application in order to get started. The code I have so far is shown below:
WPF XAXML
<Window x:Name="wndMain" x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ews="clr-namespace:ExtraWindowStyles"
ResizeMode="NoResize"
ews:ExtraWindowStyles.CanMinimize="false"
ews:ExtraWindowStyles.CanMaximize="false"
Title="Hello World" Height="501.492" Width="842.285">
<Grid>
<GroupBox Header="Input Parameters" HorizontalAlignment="Left" Height="173" Margin="10,25,0,0" VerticalAlignment="Top" Width="801" >
<StackPanel Orientation="Horizontal" Margin="0,0,96,0">
<StackPanel Margin="10">
<Label FontWeight="Bold">First Group</Label>
<RadioButton x:Name="opt11">Option 1 - 1</RadioButton>
<RadioButton x:Name="opt12">Option 1 - 2</RadioButton>
<RadioButton x:Name="opt13">Option 1 - 3</RadioButton>
</StackPanel>
<StackPanel Margin="10">
<Label FontWeight="Bold" Content="Second Group"/>
<RadioButton x:Name="opt21" Content="Option 2 - 1"/>
<RadioButton x:Name="opt22" Content="Option 2 - 2"/>
<RadioButton x:Name="opt23" Content="Option 2 - 3"/>
</StackPanel>
</StackPanel>
</GroupBox>
<Separator HorizontalAlignment="Left" Height="80" Margin="17,203,0,0" VerticalAlignment="Top" Width="794"/>
<Button x:Name="btnSubmit" Content="Submit" HorizontalAlignment="Left" Height="34" Margin="632,203,0,0" VerticalAlignment="Top" Width="179" Click="btnExplore_Click" />
<Label Content="Results:" HorizontalAlignment="Left" Height="28" Margin="10,242,0,0" VerticalAlignment="Top" Width="161"/>
<Label Content="My App" HorizontalAlignment="Left" Height="23" Margin="696,439,0,0" VerticalAlignment="Top" Width="130" FontSize="9"/>
<TextBlock>
<Hyperlink NavigateUri="http://www.google.com" RequestNavigate="Hyperlink_RequestNavigate">
Click Here
</Hyperlink>
</TextBlock>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="162" Margin="17,270,0,0" Stroke="Black" VerticalAlignment="Top" Width="794"/>
<Label x:Name="lblResult" Content="" HorizontalAlignment="Left" Height="157" Margin="17,275,0,0" VerticalAlignment="Top" Width="794"/>
</Grid>
</Window>
Code Behind..
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
{
Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri));
e.Handled = true;
}
If I comment out the Hyperlink control XAML (and its related backend code), I am able to select options, click the Submit button etc.
However, if I uncomment the Hyperlink control (and its associated backend code), The only thing that remains clickable, is the Url on the form - what's going on?

Just position your TextBlock and it won't take all space in the window and cover everything :
<TextBlock Width="100" Height="30">
<Hyperlink Background="Red" NavigateUri="http://www.google.com" >
Click Here
</Hyperlink>
</TextBlock>
Because the TextBlock is after submit button in XAML it is over.
You could also set Margin to position the TextBlock
Layout knowledge
Elements in a grid Stretch Horizontally and Vertically if no alignment is set.
Useful tip : If you click on the TextBlock tag, you'll see the extent of the TextBlock in the design view.
Often useful

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>

I'm trying to make my scrollviewer zoom work. Without ZoomMaxFactor and ZoomMinFactor it is working great, but no limits for zoom.
So i added the properties ZoomMaxMinFactor and my image are resizing without any interaction, i already looked for an answer but got nothing.
My XAML:
<PivotItem Header="item 1" >
<StackPanel x:Name="MyPanel" Width="360" Height="460">
<ScrollViewer Width="360" Height="460" ZoomMode="Enabled"
VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility="Visible"
MaxZoomFactor="0.5" MinZoomFactor="0.5">
<Image x:Name="MyCoolImg"/>
</ScrollViewer>
</StackPanel>
</PivotItem>
And code behind:
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
MyCoolImg.Source = (BitmapImage)e.Parameter;
}
Thanks for your time =)

I got it,
New XAML:
<PivotItem Header="item1" >
<Grid Grid.Row="1">
<ScrollViewer Width="360" Height="470" HorizontalAlignment="Left" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="0.9" MaxZoomFactor="2.8">
<StackPanel>
<Image Width="360" Height="470" x:Name="myCoolImg" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</StackPanel>
</ScrollViewer>
</Grid>
</PivotItem>
Thanks for the help Kennyzx!

Trying to implement a conversation view in a wp8.1 app using telerik controls, a platform im not familiar with. I keep getting a reference error on build:
Error 3 The name "RadPointerContentControl" does not exist in the namespace "clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives". D:\Visual Studio Workspace\Sports App\Sports App Prototype\Sports App Prototype\MainPage.xaml 74 29 Sports App Prototype
This error is really confusing me. I have referenced
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
in the XAML document but cannot seem to get it working properly, as if its just not seeing the reference properly, or is missing it at build time, tbh i havent a clue!
Any help would be much appreciated.
EDIT: XAML
<Page xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
x:Class="Sports_App_Prototype.MainPage"
xmlns:primitives="clr-namespace:Telerik.Windows.Controls.Primitives;assem‌​bly=Telerik.Windows.Controls.Primitives"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Sports_App_Prototype"
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>
<Pivot>
<Flyout x:Name="registration" >
<Grid Height="320">
<TextBlock Margin="0,0,0,309">
Register New User or Login
</TextBlock>
<TextBox Margin="10,59,10,0" Text="Password">
</TextBox>
<TextBox Margin="10,16,10,0" Text="Username">
</TextBox>
<CheckBox Margin="172,99,0,0" Content="Accept">
</CheckBox>
<Button Content="Register/Login" Margin="10,99,0,164">
</Button>
</Grid>
</Flyout>
<PivotItem Header="map view">
<StackPanel>
<Maps:MapControl Height="450" Width="355" />
<Button x:Name="FilterButton" HorizontalAlignment="Center" Click="Filter_Click" Content="Filter" Margin="126,0,126.667,0" Height="61"/>
</StackPanel>
</PivotItem>
<Flyout x:Name="Filter">
<Grid>
<StackPanel>
<TextBlock>
Filter Users
</TextBlock>
<RichTextBlock>
<!-- Stuff goes here for RTB -->
</RichTextBlock>
<CheckBox>
Dynamically generated from user #1
</CheckBox>
<CheckBox>
Dynamically generated from user #2
</CheckBox>
<CheckBox>g
Dynamically generated from user #3
</CheckBox>
<CheckBox>
Dynamically generated from user #4
</CheckBox>
</StackPanel>
</Grid>
</Flyout>
<PivotItem Header="chat">
<DataTemplate>
<Grid Margin="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<telerikPrimitives:RadPointerContentControl Background="{StaticResource PhoneAccentBrush}"
TargetPoint="-150,-300">
<telerikPrimitives:RadPointerContentControl.PointerTemplate>
<DataTemplate>
<Polygon Width="12"
Height="24"
Points="0,0 12,0 12,12 0,24"
StrokeThickness="0"
Fill="{StaticResource PhoneAccentBrush}"
RenderTransformOrigin="0.5, 0.5">
<Polygon.RenderTransform>
<ScaleTransform ScaleX="-1"/>
</Polygon.RenderTransform>
</Polygon>
</DataTemplate>
</telerikPrimitives:RadPointerContentControl.PointerTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Text}"
TextWrapping="Wrap"
Margin="12"/>
<TextBlock Text="{Binding Path=TimeStamp}"
Margin="12, 0, 12, 12"
HorizontalAlignment="Right"/>
</StackPanel>
</telerikPrimitives:RadPointerContentControl>
</Grid>
</DataTemplate>
</PivotItem>
</Pivot>
</Grid>

This is complaining that it cannot find the reference to the .DLL. Under references in Visual Studio, do you have the file called Telerik.Windows.Controls.Primitives added? If so, then please post your entire XAML file and I'll help you troubleshoot it.
BTW, make sure you are using a Silverlight WP8.1 app and not a WinRT app.