We Keep Coding

Drag & Drap doesn't work with custom Window.Style

I have a simple UI made with wpf. In there is a Page containig a CustomControl with a TreeView. To reorder the TreeNodes i am using wpf dragdrop. This works pretty well so far. Now i'm playing around with WindowChrome to create a borderless window. But the Problem: Now Drag & Drop won't work. If i try to drag an object the curser changes into a "no valid drop position"
What i've found out: If i delete my custom evererything works. But i have now idea what is missing to get the drag and drop function working with my custom style.
The TreeView:
<TreeView x:Name="StructureTree"
Grid.Row="0"
Padding="10,20,20,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
ItemsSource="{Binding Path=RootElement.Children}"
Background="{x:Null}"
BorderBrush="{x:Null}"
dd:DragDrop.IsDragSource="true"
dd:DragDrop.IsDropTarget="true"
dd:DragDrop.UseDefaultDragAdorner="true">
The Window.Resources:
<Window.Resources>
<Style TargetType="{x:Type local:MainWindow}" BasedOn="{StaticResource {x:Type Window}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<!-- Outer border with the dropshadow margin -->
<Border Padding="{Binding OuterMargin, FallbackValue=10}">
<!-- Main window outline -->
<Grid>
<!-- Opacity mask for corners on grid -->
<Border x:Name="Container"
Background="{StaticResource BackgroundVeryLightBrush}"
CornerRadius="{Binding WindowCornerRadius}" />
<!-- Window border and dropshadown -->
<Border CornerRadius="{Binding WindowCornerRadius}"
Background="{Binding BackgroundVeryLightBrush}" BorderBrush="#FF1E1E1E">
<Border.Effect>
<DropShadowEffect ShadowDepth="2" Opacity="0.2" BlurRadius="5" />
</Border.Effect>
<Border.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Container}" />
</Border.OpacityMask>
</Border>
<!-- The main window content -->
<Grid>
<!-- Corner clipping -->
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=Container}" />
</Grid.OpacityMask>
<Grid.RowDefinitions>
<!-- Title Bar -->
<RowDefinition Height="{Binding TitleHeight, FallbackValue=42}"/>
<!-- Window Content -->
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Title Bar -->
<Grid Grid.Column="0" Grid.Row="0" Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<!-- Icon -->
<ColumnDefinition Width="Auto"/>
<!-- Title -->
<ColumnDefinition Width="*"/>
<!-- Window Buttons -->
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Icon -->
<Button Margin="1" Padding="0" Style="{StaticResource IconButton}" WindowChrome.IsHitTestVisibleInChrome="True" Command="{Binding MenuCommand}">
<!--<Image Source="/Images/Logo/Icon.ico"/>-->
</Button>
<!-- Title -->
<Viewbox Grid.Column="0" Grid.ColumnSpan="3" Margin="0">
<TextBlock Style="{StaticResource TitleText}"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title, FallbackValue= 'Wellcome'}"/>
</Viewbox>
<!-- Window Buttons -->
<StackPanel Grid.Column="2" Orientation="Horizontal">
<Button Command="{Binding MinimizeCommand}" Style="{StaticResource WindowControlButton}" Content="_"/>
<Button Command="{Binding MaximizeCommand}" Style="{StaticResource WindowControlButton}" Content="[ ]"/>
<Button Command="{Binding CloseCommand}" Style="{StaticResource WindowCloseButton}" Content="X"/>
</StackPanel>
</Grid>
<!-- Page Content -->
<Border Grid.Row="1" Padding="{Binding InnerContentPadding}">
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

When I was experimenting with a similar scenario I found that WPF won't allow to drop an item if it can't detect a control under the cursor. The solution to this may be to add a stretched rectangle "under" your TreeView with transparent filling:
<Rectangle
Fill="Transparent"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
<TreeView x:Name="StructureTree"...
Just so a control could be "under" your cursor and then you should get back your valid drop area.
Edit:
If it doesn't want to work, try to put the rectangle before this part in the template:
<!-- Opacity mask for corners on grid -->
<Border x:Name="Container"
Background="{StaticResource BackgroundVeryLightBrush}"
CornerRadius="{Binding WindowCornerRadius}" />
And since the basic window template uses AdornerDecorator, it's worth a shot to include in your template too, where needed:
<AdornerDecorator>
<ContentPresenter.../>
</AdornerDecorator>

How do I use multiple user-controls inside one xaml page?

I'm creating an application for educational purposes. How can i use multiple User controls in my "MainWindow.xaml"?
I want to use User controls on my MainWindow so that I wont need multiple windows. So after you press next on the sign up layout,
it should take you to the thank you screen which is also another UserControl class. Although in the same Window.
I've read as many different "solutions" as I could, without any real luck..
Here's the code I have atm.
Main Window.xaml
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="700"
WindowStartupLocation="CenterScreen">
<Grid>
<!--Background image-->
<Grid.Background >
<ImageBrush ImageSource="login-page-background-3.jpg"/>
</Grid.Background>
<!--Main content scroll-->
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<local:SignUpControl>
</local:SignUpControl>
</ScrollViewer>
</Grid>
MainWindow.xaml.cs has no code...
SignUpControl.Xaml
<UserControl x:Class="WpfApp1.SignUpControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.TextAlignment="Center">
<!--Login main content white box-->
<Border Background="WhiteSmoke"
Opacity="0.4"
CornerRadius="30"
Padding="15 50 15 15"
Width="350"
Margin="50 50 50 0">
<StackPanel>
<!--Sign Up header-->
<TextBlock FontSize="20"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="auto"
FontFamily="Goudy Stout" >Sign Up</TextBlock>
<!--Sign up subtext-->
<TextBlock FontSize="14"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="auto"
FontFamily="Ravie" >It's about to get fun!</TextBlock>
<!--Inner grid for Username & Password-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Textbox for username-->
<TextBox Grid.Row="0" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="UsernameBox" Margin="5"/>
<TextBlock IsHitTestVisible="False" Text="Username" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=UsernameBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<!--PasswordBox-->
<TextBox Grid.Row="1" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="passwordBox" Margin="5"/>
<TextBlock Grid.Row="1" IsHitTestVisible="False" Text="password" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=passwordBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<!--Next Button-->
<Button Content="Next"
HorizontalAlignment="Center"
FontWeight="Bold"
FontSize="14"
BorderThickness="0"
FontFamily="Goudy Stout"
Background="Transparent"
Padding="20 10"
Margin="0 10"
x:Name="NextButton"
Click="NextButton_Click"/>
</StackPanel>
</Border>
<!--Border for PreRegistered account-->
<Border Background="WhiteSmoke"
Opacity="0.4"
CornerRadius="50"
Padding="0"
Width="400"
Height="auto"
Margin="0 12.5 0 0">
<!--Already registered button-->
<Button Content="I already have an account"
HorizontalAlignment="Center"
Opacity="0.8"
FontSize="13"
BorderThickness="0"
FontFamily="Goudy Stout"
Background="Transparent"
Foreground="Black"
x:Name="alreadyRegBtn"
Padding="0 10"
Margin="0 5 0 5"/>
</Border>
</StackPanel>
How do I go about doing this solution where I can change between user controls on the same window, Ofcourse after the thank you screen I will be using the same logic to go to "Sign In!" an so on...

When i'm not using Prism or Dependency Injection then I normally use the View Model first approach.
In this scenario we have a property on our Windows ViewModel that is a class that the other UserControls ViewModels inherit from, normally just use a ViewModelBase class that has the implimentation of INotifyPropertyChanged:
private ViewModelBase currentViewModel;
public ViewModelBase CurrentViewModel
{
get { return currentViewModel; }
set { currentViewModel = value; NotifyPropertyChanged(); }
}
Now inside of your MainWindow like #Tomtom said you have a ContentControl bound to that property. This means that using DataTemplates You can have a different View display depending on which ViewModel type is currently on that property.
<Window.Resources>
<DataTemplate DataType="{x:Type viewmodels:ViewModel1}">
<views:View1/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:ViewModel2}">
<views:View2/>
</DataTemplate>
</Window.Resources>
<ContentControl Content="{Binding CurrentViewModel}"/>
With this in place all you need to do is have some logic that changes the ViewModel on the MainWindow ViewModel and the View will update to display the correct View for that ViewModel.
Edit: One thing to note is there are lots of different ways people use to achieve what you want, none of them are really right or wrong but they all suit different peoples needs and coding styles.

I've answered a similar question a while ago.
See this post
You can create a ContentControl in your Window and switch the bound UserControl where the user clicks or something else

Black Background occurs when using microsoft.windows.shell

I am using the microsoft.windows.shell to customize my wpf window chrome. Everything is fine until I added a datagrid. The problem is that the appearance of the window become black sometimes. This situation does not happen constantly! Sometimes it looks fine but sometimes it has a black background.
Here is my xaml code:
<Window x:Class="CodeGeneratorWpf.Config"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Config" Height="300" Width="300" Style="{StaticResource MainWindowStyle}"
WindowStartupLocation="CenterOwner" Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<DataGrid Name="dataGrid" Grid.Row="0" ItemsSource="{Binding data}"
AlternatingRowBackground="{StaticResource {x:Static SystemColors.ControlBrushKey}}"
ClipToBounds="True" VerticalGridLinesBrush="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"
HorizontalGridLinesBrush="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"
LoadingRow="dataGrid_LoadingRow">
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType=DataGridRow},
Path=Header}"/>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
</DataGrid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Name="btnSave" Grid.Column="0" Content="Save" Style="{StaticResource EmphasizeButton}" HorizontalAlignment="Stretch" Margin="25,5,25,5" Click="btnSave_Click"/>
<Button Name="btnCancel" Grid.Column="1" Content="Cancel" Style="{StaticResource NormalButton}" Margin="25,5,25,5" Click="btnCancel_Click"/>
</Grid>
</Grid>
</Window>
The MainWindowStyle:
<!--Captions Buttons to control the window borderless-->
<DockPanel Grid.Row="0">
<DockPanel.Background>
<SolidColorBrush Color="#FF5D91DC"></SolidColorBrush>
</DockPanel.Background>
<Image Name="imgTitle" Source="{TemplateBinding Icon}" DockPanel.Dock="Left" Margin="5"></Image>
<Label Content="{TemplateBinding Title}" Foreground="White"></Label>
<ctrl:CaptionButtons Margin="0,0,0,0" Grid.Row="0" HorizontalAlignment="Right" Type="Full"
Foreground="{DynamicResource CaptionButtonColor}" FontSize="14" MarginButton="0,0,5,0"
VerticalAlignment="Center" shell:WindowChrome.IsHitTestVisibleInChrome="True">
</ctrl:CaptionButtons>
</DockPanel>
<ContentPresenter Margin="0" Grid.Row="1" Content="{TemplateBinding Content}"/>
</Grid>
</Border>
</ControlTemplate>
<Style x:Key="MainWindowStyle" TargetType="{x:Type Window}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome
ResizeBorderThickness="6"
CaptionHeight="25"
CornerRadius="0"
GlassFrameThickness="0,0,0,1" />
</Setter.Value>
</Setter>
<Setter Property="Template" Value="{StaticResource MainWindowControlTemplate}"/>
</Style>
Can I get some help?

Include the templated Control into template?

I want to template a Control and include the Control itself into the template, not only the control's content.
For example, I have a button:
<Grid x:Name="LayoutRoot" Background="White">
<Button Name="hello" Content="123" Width="100" Height="100" >
</Button>
</Grid>
I want to make a broader to surround this button, so it will look like this:
<Grid x:Name="LayoutRoot" Background="White" Width="120" Height="120">
<Rectangle Fill="AliceBlue"/>
<Button Name="hello" Content="123" Width="100" Height="100" >
</Button>
</Grid>
But I want to make this more genric, not only for button, but for some other control.
i.e Image, TreeViewItem etc.
So I created a template:
<UserControl.Resources>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="120" Height="120">
<Rectangle Fill="AliceBlue"/>
<ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Button Name="hello" Content="123" Width="100" Height="100" >
</Button>
</Grid>
Now the ContentPresenter only display the content of the Button, but not include the button itself, how can I include the templated control itself too?

ControlTemplate not showing Grid

I'm trying to create a Button that contains a grid, with rows that contain certain text.
The Button will have two rows, both with different pieces of text. The text that is passed to the ControlTemplate is showing, but not the text specified in the template.
Also, the heights of the Grid rows is not showing. I want it to expand the height of the button. In fact, I'm not sure that the Grid is showing at all really.
<Window x:Class="MAQButtonTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="695" Width="996">
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="OverridesDefaultStyle" Value="True"/>
</Style>
<ControlTemplate TargetType="Control" x:Key="1">
<Grid Width="444">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter Grid.Row="0" />
</Grid>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="#e9f1f6"></Grid>
<Grid Grid.Column="1" Background="#d2e3ed">
<StackPanel>
<TextBlock FontFamily="Segoe UI" FontSize="22" FontWeight="Medium" Margin="52,58,0,0" Foreground="#0c3d5d">Your Quizzes <TextBlock FontFamily="Segoe UI" FontSize="18" FontWeight="Medium" Foreground="#0c3d5d">(7)</TextBlock></TextBlock>
<Grid>
<Button Width="444" Background="{x:Null}" BorderThickness="0" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<TextBlock>This is a second piece of text</TextBlock>
</Button>
</Grid>
</StackPanel>
</Grid>
</Grid>
</Window>
Here's how it shows at the moment with a rough illustration of what I'm trying to achieve as a button layout:

You're setting the Style of the Button, when you should be setting the Template
Resource:
<ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
<Grid Width="444">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#286c97">
<TextBlock>This is the first piece of text</TextBlock>
</Grid>
<Grid Grid.Row="1" Background="#5898c0">
<ContentPresenter />
</Grid>
</Grid>
</ControlTemplate>
And the button:
<Button Template="{StaticResource ButtonTemplate}" >
Text 2
</Button>

Why are you using TargetType as "Control", use Button. You will need to define a button. Use Blend to edit button template to strip all unnecessary content from it.