27

I'm currently trying to implement a Metro styled Window.
So i've made the following styles inside a ResourceDictionary:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!-- Brushes --> <SolidColorBrush x:Key="BackgroundColor" Color="#FFFFFFFF" /> <!-- Buttons --> <Style x:Key="MetroControlBoxButton" TargetType="Button"> <Setter Property="Background" Value="{StaticResource BackgroundColor}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <ContentPresenter /> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- Windows --> <Style x:Key="MetroWindow" TargetType="Window"> <Setter Property="UseLayoutRounding" Value="True" /> <Setter Property="WindowStyle" Value="None" /> <Setter Property="ResizeMode" Value="NoResize" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Window"> <Grid Background="{StaticResource BackgroundColor}"> <Grid.RowDefinitions> <RowDefinition Height="6" /> <RowDefinition Height="24" /> <RowDefinition Height="*" /> <RowDefinition Height="24" /> <RowDefinition Height="6" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="6" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="6" /> </Grid.ColumnDefinitions> <Rectangle Name="topLeftBorderRectangle" Fill="Red" Grid.Row="0" Grid.Column="0" /> <Rectangle Name="topCenterBorderRectangle" Fill="Orange" Grid.Row="0" Grid.Column="1" /> <Rectangle Name="topRightBorderRectangle" Fill="Red" Grid.Row="0" Grid.Column="2" /> <Rectangle Name="middleLeftBorderRectangle" Fill="Orange" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" /> <Rectangle Name="middleRightBorderRectangle" Fill="Orange" Grid.Row="1" Grid.RowSpan="3" Grid.Column="2" /> <Rectangle Name="bottomLeftBorderRectangle" Fill="Red" Grid.Row="4" Grid.Column="0" /> <Rectangle Name="bottomCenterBorderRectangle" Fill="Orange" Grid.Row="4" Grid.Column="1" /> <Rectangle Name="bottomRightBorderRectangle" Fill="Red" Grid.Row="4" Grid.Column="2" /> <Rectangle Name="statusBarRectangle" Fill="Yellow" Grid.Row="3" Grid.Column="1" /> <Grid Grid.Row="1" Grid.Column="1"> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*"/> <ColumnDefinition Width="28" /> <ColumnDefinition Width="28" /> <ColumnDefinition Width="28" /> </Grid.ColumnDefinitions> <Rectangle Name="dragRectangle" Fill="Yellow" Grid.Row="0" Grid.Column="1" /> <Button Name="minimizeButton" Content="_" Grid.Row="0" Grid.Column="2" Style="{StaticResource MetroControlBoxButton}" Command="{Binding Path=DataContext.MinimizeCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" /> <Button Name="maximizeButton" Content="[]" Grid.Row="0" Grid.Column="3" Style="{StaticResource MetroControlBoxButton}" Command="{Binding Path=DataContext.MaximizeNormalizeCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" /> <Button Name="closeButton" Content="X" Grid.Row="0" Grid.Column="4" Style="{StaticResource MetroControlBoxButton}" Command="{Binding Path=DataContext.CloseCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" /> </Grid> <ContentPresenter Grid.Row="2" Grid.Column="1" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>

My problem is that i have no idea how to implement de drag feature.
My dragRectangle doesn't have a Command property so how can i call DragMove() on MouseLeftButtonDown on a Rectangle using MVVM?

Thanks

Improve this question

1 Answer 1

Reset to default
51

A ResourceDictionary can have code behind just like Windows etc. so you could add an event handler and call DragMove from there

Setting up the code behind requires a couple of steps.

  • If your ResourceDictionary is called MetroStyleResourceDictionary.xaml you add a new file in Visual Studio in the same folder called MetroStyleResourceDictionary.xaml.cs

  • The code behind file should then look like this

    public partial class MetroStyleResourceDictionary { //... }

  • After that you need to add the x:Class attribute to the Xaml file

    <ResourceDictionary x:Class="YourNamespace.MetroStyleResourceDictionary" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--...--> </ResourceDictionary>

Now you can add an event handler to the dragRectangle for MouseLeftButtonDown. You'll also need to get a hold of the Window so binding that to Tag might be a good idea

<Rectangle Name="dragRectangle" MouseLeftButtonDown="dragRectangle_MouseLeftButtonDown" Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}}" .../>

And finally you can add the event handler to the code behind file which will look like this

public partial class MetroStyleResourceDictionary { void dragRectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { Rectangle dragRectangle = sender as Rectangle; Window window = dragRectangle.Tag as Window; if (window != null) { window.DragMove(); } } }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you from me for explaining exactly how to do this. I have probably read 4 SO "answers" from people who talk down to the questioner for asking the question but who never answer the question fully.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.