Develop Reference

How do I access the content in TabControl.ContentTemplate in the c#back code?

I write a vector editor. Before I started using TabControl, everything worked for me. However, it became necessary to upload several open files simultaneously. Each open file is displayed on TabItem. As a result of chatting on forums, I found out that you need to create an MVVM to correctly display data from different different files. I was advised to Set a common template for all tabs. By adding items to the collection that TabControl is linked to, tabs will be created automatically using this template. I did the following:
<TabControl x:Name="Drawing_TabControl" Grid.Row="0" Background="WhiteSmoke"
SelectionChanged="Drawing_TabControl_SelectionChanged">
<TabControl.ContentTemplate>
<DataTemplate>
<Grid x:Name="Drawing_Grid_Tab"
Background="WhiteSmoke">
<Canvas x:Name="coordinateCanvas_Tab"
Background="GhostWhite"
Height="6cm"
Width="16cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Canvas>
<Canvas x:Name="gridCanvas_Tab"
Background="Transparent"
Height="6cm"
Width="16cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"
SizeChanged="gridCanvas_SizeChanged"></Canvas>
<Border x:Name="drawing_Border_Tab"
BorderBrush="Black"
BorderThickness="0.5 0.5 0.5 0.5"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Border>
<Canvas x:Name="drawing_gridCanvas_Tab"
Background="White"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Canvas>
<Canvas x:Name="drawing_tempCanvas_Tab"
Background="Transparent"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"></Canvas>
<Canvas x:Name="drawingCanvas_Tab"
Background="Transparent"
Height="4cm"
Width="14cm"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ClipToBounds="True"></Canvas>
</Grid>
</DataTemplate>
</TabControl.ContentTemplate>
<TabItem x:Name="drawTabItem1"
Header="Макет_1" Background="WhiteSmoke">
</TabItem>
</TabControl>[enter image description here][1]
How can I access x:Name="coordinateCanvas_Tab" in the back code, for example?

If you've been advised and have implement that advice to change to an MVVM code structure then you do not access the XAML component directly from the code behind file anymore.
Instead you need to wire up a two way binding between your View XAML and the ViewModel you are using.
This is primarily done by utilising the BindingContext object in the view after the screen is initialized in your constructor code behind.
After that you can then assign values to a Collection object in your ViewModel and bind to it in the XAML. To do the dynamic tab insertion you want to do you can make use of the BindableLayout attribute then in the ItemTemplate bind values for each tab from the collection objects.
Have a look at this guide for a better understanding of Bindings.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm

have stackpanel clickable and load viewport

first post here so if I do anything wrong please slap me.
I'm currently trying to learn UWP code and I want to try to create a bottom naivation bar. I'm trying to work with stackpanels to do so
The idea is that when a stackpanel is clicked / tapped it should load a new page into viewport, however I can't figure out the correct code to do so. Here's an short version of my stackpanel:
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<StackPanel Name="FirstButton" Tapped="FirstButton_Tapped">
<TextBlock x:Name="Icon1" />
<TextBlock x:Name="Text1" />
</StackPanel>
<StackPanel Name="SecondButton" Tapped="SecondButton_Tapped">
<TextBlock x:Name="Icon2" />
<TextBlock x:Name="Text2" />
</StackPanel>
<StackPanel Name="ThirdButton" Tapped="ThirdButton_Tapped">
<TextBlock x:Name="Icon3" />
<TextBlock x:Name="Text3" />
</StackPanel>
I chose stackpanel because that was the best way for me to have a bottom and horizontal aligned bar with an icon on top and text displaying under it.
(if you got a better idea feel free to post it)
Now the question is how i should write my C# code so that the Tapped event will load a second page into the viewport.
(further, the style I'm aiming for is something similar to what deezer uses, example is here: http://imgur.com/WNNi96v
Thank you in advance!

As #Pedro G. Dias says far better to use Button control as it has many more benefits (Visual States) that you associate with user clicking/ Tapping a Button rather than using the Tap event of StackPanel
You can customise a Button easily by utilising the ContentTemplate
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<Button x:Name="FirstButton" Click="FirstButton_Click">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="Icon1" />
<TextBlock x:Name="Text1" />
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
<!--More buttons here-->
</StackPanel>

Simply create buttons and place them inside each stackpanel. The button.Content property of the Button control will let you put the two textblocks inside it.

Open popup at the location of the button clicked

I am trying to create a popup that opens similar to the window preview option in Windows 8 taskbar. Basically, when I click or hover on a button, it opens a popup with basic information just above the button. Here is an example.
Right now, I am able to open the popup at either the extreme left or extreme right side of the page, using the code below.
<Frame x:Name="PopUpFrame" HorizontalAlignment="Left" Visibility="Hidden" Height="400" Margin="10,10,0,0" Grid.Row="1" VerticalAlignment="Bottom" Width="400" Source="/BasicApp;component/StandingOrderPopUp.xaml" NavigationUIVisibility="Hidden"/>
I have 3 different buttons in the button bar, so I cannot set the fixed margin. I am trying to set the same in code but I am unable to get the absolute position and convert it to margin property. I am not sure, if there is a better solution either.
Edit:
Tried using popup but it doesn't open on button click.
<Popup x:Name="PopUpFrame" Placement="Top" PlacementTarget="{Binding ElementName=StandingOrderButton}" Width="400" Height="400">
<DockPanel Background="#770081a7">
<Canvas DockPanel.Dock="Bottom" x:Name="PopupButtonBar" Height="50" VerticalAlignment="Bottom">
<Button Height="30" Width="125" HorizontalAlignment="Right" VerticalAlignment="Center" Canvas.Top="10" Content="CLOSE" Foreground="White" Background="#ff0081a7" BorderBrush="White" FontFamily="Trebuchet MS" Canvas.Left="10" />
</Canvas>
<Label Margin="5,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top" Content="STANDING ORDERS" Foreground="#ffffffff"></Label>
<Grid DockPanel.Dock="Top">
<Border BorderThickness="2" BorderBrush="#FFff7a00"></Border>
<RichTextBox Margin="2" Foreground="#FF0081a7" FontFamily="Trebuchet MS" IsEnabled="False"/>
</Grid>
</DockPanel>
</Popup>
And here is the event handler.
Private Sub StandingOrder_Click(sender As Object, e As RoutedEventArgs)
PopUpFrame.Visibility = Windows.Visibility.Visible
End Sub
Edit:
Never mind. I am an idiot. Instead of setting IsOpen property, I set the visibility. :(
It works perfectly, although, I had to copy the whole design from the separate page to this one. Still better than nothing. Only problem now is if I click on something else, I will have to write code to make sure popup is closed.

You can use a Popup control, coupled with it's Placement property to display your popup based on the current location of your buttons.
<Popup Placement="Top" PlacementTarget="{Binding ElementName=yourButton}" ... />
Inside your Popup, you can place your UserControl or any content element which will act as the popup's content.
See here for further information on popup placements, and here for a tutorial on WPF Popup controls.

Think about using ContextMenu, and set it's content you whatever you want. Thats is the solution for you.

This is how i defined one of my popups:
<Popup x:Name="btnPowerPopup" Placement="Mouse" StaysOpen="False">
....
</Popup>
you can user from the code behind on a button click or something :
btnPowerPopup.IsOpen = true;
and when the job is done:
btnPowerPopup.IsOpen = false;
But StaysOpen="False" let's you close the PopUp when clicking somewhere else.

How to expand and collapse in WPF like in webpage

Is anyone familiar with websites that have an attribute similar to a tree-view? Like the download segment of the Microsoft website. You press the plus button, it expands and everything below it moves further down. You press the minus button and everything in that block collapses and the content below shifts back up.
Granted C# is nothing like HTML and CSS but I just wanted to know if it was possible to do the same in a WPF application.
It seems like the tree-view currently in the tool box allows for text only to be implemented. It doesn't allow for additional objects such as labels or text-boxes.
I discovered the EXPANDER and it does a good job of expanding and collapsing its content's but isn't quite capable of pulling objects beneath it back up or pushing them back down. Here's an example of the scenario I would like.
An example of what I'm going for would be microsoft's download page if it helps. How their expand and collapse buttons work.
So is there any way to do this?

Here is an example of using the Expander as the way the download page on Microsoft uses it. Note that the Height of the RowDefinitions is set to Auto, otherwise the Expander does not collapse when IsExpanded is set to false.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander IsExpanded="True">
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock Height="50" Text="Hello" />
</Border>
</Expander>
<Expander Grid.Row="1" IsExpanded="True">
<Border BorderBrush="Green" BorderThickness="2">
<TextBlock Height="50" Text="World" />
</Border>
</Expander>
</Grid>

regular tree view can do what you ask.
see this wonderful code-project explanation:
http://www.codeproject.com/Articles/124644/Basic-Understanding-of-Tree-View-in-WPF

WPF Expander component do exactly what you want and it push down other control if hosted in a proper panel. Try using a StackPanel for example.

How can I create custom dropdown menu

I am new to WPF. I want to create a dropdown menu similar to this image. I am not getting from which control should I start the implementation of ControlTemplate.
I guess It is a Hyperlink with a ContextMenu.

WPF Popup control is exactly what you are looking for:
<Popup Name="myPopup" IsOpen="True">
<Label Name="myLabel" Content="Language: English"
Background="Black" Foreground="White"/>
<...other controls you like.../>
</Popup>