We Keep Coding

XAML, move two contentcontrol inside a button with animation - c#

Is it possible to move two contentcontrol inside a button and also resize this said button?
<Button Height="100" Width="100">
<Grid>
<Grid.RowDefinitions>
<RowDefinition height="30"/>
<RowDefinition height="30"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="img.jpg"/>
<TextBlock Grid.Row="1" Text="Some content"/>
</Grid>
</Button>
I would like to align them horizontally instead of vertically on MouseOver and resize the button from 100 to 50, is this possible ?

This can be achieved with a style:
<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<UniformGrid x:Name="uGrid">
<Image Source="img.jpg" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UniformGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="uGrid" Property="Rows" Value="2" />
<Setter TargetName="uGrid" Property="Columns" Value="1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="uGrid" Property="Columns" Value="2" />
<Setter TargetName="uGrid" Property="Rows" Value="1" />
<Setter Property="Height" Value="50" />
<Setter Property="Width" Value="50" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style defines a modified template for your button, and can leverage triggers to respond to mouse events.
To add the style to your button, do the following:
<Grid>
<Grid.Resources>
<!-- Put Style Here -->
</Grid.Resources>
<Button Style="{DynamicResource ExampleButtonStyle}">
<TextBlock Grid.Row="1" Text="Some content"/>
</Button>
</Grid>
How you distribute your code between the style and the control instance is up to you. You will likely want to keep things modular and reusable.
Anatomy of a Style
If you haven't explored styles before, they can be a bit daunting and verbose. I have explained the components of the provided style below.
You would start a new style by declaring the Style. Here you must nominate a target type (what you want to apply the style to) and a Key (the name of the style resource:
<Style x:Key="ExampleButtonStyle" TargetType="{x:Type Button}">
<!-- Style content goes here. -->
</Style>
Setters are used to make the style apply values to properties of the target control. For example:
<Setter Property="Background" Value="LightGray"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="100"/>
Because you want to change the layout of the button, you will want to nominate a control template. To do this, use a Setter to set the Template property of the button. The template here can include any layout you want. The ContentPresenter is used to display the body of the Button tag from your implementation:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<UniformGrid x:Name="uGrid">
<Image Source="img.jpg" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</UniformGrid>
</Border>
<ControlTemplate.Triggers>
<!-- Triggers here -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Finally, you need to add triggers to make the control template update with interaction. The trigger essentially observes a property of the control, and applies when its value matches the value nominated by the trigger. This updates the control using the setters within.
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="uGrid" Property="Rows" Value="2" />
<Setter TargetName="uGrid" Property="Columns" Value="1" />
</Trigger>
Layout
To achieve your layout goal I used a UniformGrid. The UniformGrid divides itself into equal cells to match the number of content items within. Note that this is available in WPF, but not UWP. On the UniformGrid, you can set a Columns or Rows count, and the grid will compensate as necessary. In the style above, I am changing the nominated Row and Column counts and letting the grid adjust itself layout accordingly. This visually swaps content from rows to columns.
Concerns
There are other methods that could achieve this more elegantly, but Styles offer a large amount of flexibility, and have a smaller learning curve.
You stated that you wanted to change the button size from 100 to 50 (I am assuming on both axis?) and I must advise you against this. You will see what happens when you apply the provided style; the button starts as a 100x100 square. A user moves the mouse over the button to just inside the button's edge. The button rapidly changes from 50x50 to 100x100 until the mouse is moved to the centre or off the button entirely. This offers a poor and confusing user experience, and deserves some more thought.

this might be late, but according to what have been said in the comments, this could do the trick, i have worked on something similar recently
<Style x:Key="btnSubMenu" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="ExtraBold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid x:Name="uGrid2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="/Images/1.png" />
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Grid Grid.Row="2" Name="Gbexample" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCity}" Name="btnCity"/>
<Button Grid.Row="1" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strCountry}" Name="btnCountry"/>
<Button Grid.Row="2" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strStore}" Name="btnStoreIn"/>
<Button Grid.Row="3" Style="{DynamicResource btnSubSubMenu}" Content="{DynamicResource strLocation}" Name="btnLocation"/>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="false">
<Setter TargetName="Gbproduct" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Gbproduct" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

This is my first application with a GUI that I'm building so I might be doing things wrong.
I want to implement some navigation into my app but I don't seem to understand how to do it properly.
Here's the code:
.xaml
<Window x:Class="introducereDAC.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="Divide et Impera" Height="450" Width="800" Background="#FF00000F">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="NoWrap" Text="
←Introducere DEI (curent)" FontFamily="./#Roboto Condensed" Foreground="#505054" Margin="45,0,0,0"/>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="0" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button Content="Introducere DEI" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button Content="DEI Iterativ" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="4" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2">
<Button Content="Probleme DEI" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="5,0" Click="NavigareProbleme">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="0" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Teorie" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="1" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Avantaje + Dezavantaje" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="2" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Comparatii cu alte metode" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="3" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Cod" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="4" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Complexitate" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<Viewbox Stretch="Uniform" StretchDirection="Both" Grid.Column="5" HorizontalAlignment="Center" Grid.Row="2" VerticalAlignment="Top">
<Button Content="Executie" Width="200" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="./#Roboto Condensed" FontWeight="Bold" Margin="10,0">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
<Setter Property="BorderBrush" Value="#77dff1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77dff1"/>
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderBrush" Value="#77dff1"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Viewbox>
<DockPanel Grid.Row="3" Grid.ColumnSpan="6">
<Frame x:Name="_mainFrame" />
</DockPanel>
</Grid>
</Window>
.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace introducereDAC
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void NavigareProbleme(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(new Page1());
}
}
}
As an experiment, I've been trying to do it on the button "Probleme DEI", using Click="NavigareProbleme".
After I double click on the button, my app looks like this:
My goal is to edit that white bar and its buttons however I want, but I don't know how to do it (and I didn't find anything useful on Google), and move it at the top, above the other buttons.
Also, is there any way to make it always be there? (not only after I double click on "Probleme DEI")
Thanks.

I don't recommend to use a Frame. Instead implement a simple custom page/view navigation using data templates. You can follow this examples, if you are interested: C# WPF Page Navigation Class, How do I toggle between pages in a WPF application?.
Do not wrap each control you want to display.
Using a Viewbox to wrap a Button does not make sense. A Button inside a Grid will always stretch to occupy all available space by default. Use a Viewbox to stretch and scale elements that don't have their own resize behavior implemented and require on absolute layout properties, like Path. I doubt that you really want you buttons to stretch freely as this would look very odd.
Wrapping the lonely Frame into a DockPanel also does not make any sense. A DockPanel is a container, that arranges it's child elements relative to each other. It only makes sense to use it with more than a single child. Just add the Frame directly to the Grid. Every redundant Panel and UIElement will cost a unnecessary performance penalty as they have to be measured, arranged and maybe rendered individually (recursively).
Create a style for a control (WPF .NET) - Do not copy and paste styles to reuse them. Define a single Style, assign it a x:Key and add it to a ResourceDictionary e.g, App.xaml. Then reference it using the StaticResource markup (or define the Style as implicit to make it apply to all buttons implicitly):
App.xaml
<ResourceDictionary>
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#00000f"/>
<Setter Property="Foreground" Value="#77dff1"/>
...
</Style>
</ResourceDictionary>
Then reference it using StaticResource and the defined key:
<Button Style="{StaticResource ButtonStyle}" />
To customize the navigation bar of the Frame you would have to override the default template. You can visit Frame Styles and Templates to find an example of the original Frame style.
Alternatively hide the original navigation bar (by setting Frame.NavigationUIVisibility) and implement a custom one and use the frame's NavigationService to navigate between its content.
Moving the navigation bar without moving the Frame is not possible. Taking a look at the default template will show you that it is part of the Frame control. You can only move the buttons into a the Page, to make them part of the frame's content.
At this point I have to recommend to implement a custom navigation logic again. It will give you all the flexibility to layout your view you want, as navigation buttons and the actual content host are not part of the same template.
Or hide the original navigation UI and implement your own and locate it where ever you want.

I'm creating a custom control which is based on a ToggleButton.
With this simple style in Generic.xaml I can't get the default togglebutton styles working on my custom control.
I'm setting the foreground, background and borderbrush to the systemcolors, but nothing happens.
<Style TargetType="{x:Type local:PopupButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.ActiveBorderBrushKey}}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="MinHeight" Value="22" />
<Setter Property="MinWidth" Value="75" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:PopupButton}">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
RecognizesAccessKey="True" />
</ControlTemplate>
</ToggleButton.Template>
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Margin}"
RecognizesAccessKey="true" />
</ToggleButton>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've overridden the defaultstylekey:
public class PopupButton : ToggleButton
{
static PopupButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PopupButton), new FrameworkPropertyMetadata(typeof(PopupButton)));
}
// ...
Been testing, playing around with other (xaml) code but after a few hours I still have not figured out why the default style is not applied.

In your ControlTemplate for local:PopupButton you have a toggle button but you are overring it's template as well. Try removing:
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
RecognizesAccessKey="True" />
</ControlTemplate>
</ToggleButton.Template>

I'm trying to make a button with a square border but whenever I try to change the style of the button it removes the default styles related to it.
For example here I've found some code to remove the border and give it a similar look but it removes the triggers that animates the button when hovering over it.
<Style x:Key="SquareButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="0" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" >
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do I change something about the default button style in this specific button without removing the default style?

So quick solution would be simply to overlap button with border control:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Margin="1" />
<Border BorderBrush="Red" CornerRadius="5" BorderThickness="2" Width="50" Height="20"/>
</Grid>
Provided approach would not allow you to stretch the radius too much since button borders would start sticking out.
Blend is powerful tool for customizing controls without even looking into code. You can simple create a control template and then edit code parts which you would like to modify.
Another more appropriate solution is to override default button template as such:
<Window.Resources>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="20">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button x:Name="button" Content="Button" Width="50" Height="50" BorderThickness="1" Style="{DynamicResource RoundedButtonStyle}"/>
</Grid>
In style you can change BorderRadius and that will change your button rounding around the corners. This template was generated using Blend.

I am looking to making a multi-paged WindowsPhone 8 app that features an AdControl at the bottom. Now what I am interested in is to find out if there's a possibility of putting the AdControl in a separate frame of sorts so that the page navigation doesn't interfere with it. Basically I'm trying to split the app ViewPort into 2 parts: the app and the AdControl.
The AdControl should always be on and there would be no need to add it to different pages and to refresh it each time a navigation is performed.
Can something like this be done?

You can accomplish this by setting the style of the PhoneApplicationFrame. In the App.xaml, add the following resource
<Style x:Key="AdPhoneApplicationFrameStyle" TargetType="phone:PhoneApplicationFrame">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:PhoneApplicationFrame">
<Border x:Name="ClientArea" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<adDuplex:AdControl Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In App.xaml.cs within the InitializePhoneApplication add the following line after the RootFrame is created
RootFrame.Style = (Style)Resources["AdPhoneApplicationFrameStyle"];
If you want to have page transitions, see this blog post for more information.

I'm trying to make a template that will change a Button's background as well as the color of it's TextBlock. I tried the following XAML in my template, but it just makes the button dissapear on mouseover. Is there any way to change the properties of a buttons contents on triggers?
<ControlTemplate TargetType="{x:Type Button}">
<Border
x:Name="Border"
CornerRadius="0"
BorderThickness="0"
Background="{x:Null}"
BorderBrush="#FF404040" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="TextBlock">
<TextBlock Foreground="Blue" />
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

Style:
<Style TargetType="{x:Type Button}" x:Key="MyButton">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border"
CornerRadius="0"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
TextBlock.Foreground="{TemplateBinding Foreground}"
BorderBrush="#FF404040">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="White" />
<Setter TargetName="Border" Property="TextBlock.Foreground" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage:
<Button Width="100" Height="50" Content="Lalala" Style="{StaticResource MyButton}" Background="Brown" Foreground="Green" BorderThickness="2"></Button>
You're missing the ContentPresenter, responsible for visualizing the Content property of the Button.
To set the foreground you can use TextBlock.Foreground attached property.
Control Styles and Templates has always been very usefull to me :)