We Keep Coding

MessageBox in material design wpf c#

I’m using Material Design In XAML Toolkit C# ,MessageBox in material design WPF C# ,
I need like this or better Design for MessageBox 👌
I’ve tried use DialogHost but this Error happens
No loaded DialogHost instances.
private async void MenuPopupButton_OnClick(object sender, RoutedEventArgs e) {
var sampleMessageDialog = new SampleMessageDialog {
Message = {Text = "Goodbye"}
};
await DialogHost.Show(sampleMessageDialog, "RootDialog");
}
No loaded DialogHost instances.

I have developed one custom message box(using material design controls) in my application.
i'll show you the code below of WPF XAML and C#.
it contains three types of message boxes as below.
Yes,No
Ok
Ok,Cancel
Download code from below link.
https://github.com/sandeepjadhav75502/CustomMessageBoxWPF
WPF XAML Code
Heading
<Window x:Class="EVotingDashBoard.MessageBoxCustom"
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="MessageBoxWindow" Height="220" Width="500"
WindowStartupLocation="CenterScreen" WindowStyle="None" Background="White"
ResizeMode="CanResize" Topmost="True" ShowInTaskbar="False"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="10"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
FontFamily="{DynamicResource MaterialDesignFont}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="197*"/>
<ColumnDefinition Width="295*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<materialDesign:Card x:Name="cardHeader" Grid.Row="0" Padding="10" Margin="0" materialDesign:ShadowAssist.ShadowDepth="Depth5" Background="{DynamicResource PrimaryHueDarkBrush}" Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}" Visibility="Visible" Grid.ColumnSpan="2">
<StackPanel>
<TextBlock x:Name="txtTitle" HorizontalAlignment="Center" VerticalAlignment="Stretch" Style="{DynamicResource MaterialDesignTitleTextBlock}" FontSize="20" >Message Title</TextBlock>
</StackPanel>
</materialDesign:Card>
<StackPanel HorizontalAlignment="Right" Margin="0,5,5,0" VerticalAlignment="Top" Grid.Column="1">
<Button x:Name="btnClose" Click="btnClose_Click" Width="35" Height="35" Background="White" Foreground="{DynamicResource PrimaryHueDarkBrush}" Style="{StaticResource MaterialDesignFloatingActionDarkButton}">
<materialDesign:PackIcon Kind="Close" />
</Button>
</StackPanel>
<Grid Grid.Row="1" Grid.ColumnSpan="2">
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<materialDesign:TransitioningContent>
<materialDesign:TransitioningContent.OpeningEffects >
<materialDesign:TransitionEffect Kind="FadeIn" />
<materialDesign:TransitionEffect Kind="SlideInFromBottom" />
</materialDesign:TransitioningContent.OpeningEffects>
<TextBox x:Name="txtMessage" HorizontalAlignment="Center" IsReadOnly="True" Grid.Row="0" Margin="5" materialDesign:HintAssist.Hint="" FontSize="18" Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
</materialDesign:TransitioningContent>
</Grid>
<Grid Grid.Row="1" Margin="0,20,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnOk" Click="btnOk_Click" Grid.Column="1" Style="{StaticResource MaterialDesignRaisedButton}" Margin="5" Width="100" Content="OK" ToolTip="Ok"/>
<Button x:Name="btnCancel" Click="btnCancel_Click" Grid.Column="2" Style="{StaticResource MaterialDesignRaisedButton}" Margin="5" Width="100" Content="Cancel" ToolTip="Cancel"/>
<Button x:Name="btnYes" Click="btnYes_Click" Grid.Column="1" Style="{StaticResource MaterialDesignRaisedButton}" Margin="5" Width="100" Content="Yes" ToolTip="Yes"/>
<Button x:Name="btnNo" Click="btnNo_Click" Grid.Column="2" Style="{StaticResource MaterialDesignRaisedButton}" Margin="5" Width="100" Content="No" ToolTip="No"/>
</Grid>
</Grid>
</Grid>
</Grid>
</Window>
C# Code Behind
/// <summary>
/// Interaction logic for MessageBoxCustom.xaml
/// </summary>
public partial class MessageBoxCustom : Window
{
public MessageBoxCustom(string Message, MessageType Type, MessageButtons Buttons)
{
InitializeComponent();
txtMessage.Text = Message;
switch (Type)
{
case MessageType.Info:
txtTitle.Text = "Info";
break;
case MessageType.Confirmation:
txtTitle.Text = "Confirmation";
break;
case MessageType.Success:
{
txtTitle.Text = "Success";
}
break;
case MessageType.Warning:
txtTitle.Text = "Warning";
break;
case MessageType.Error:
{
txtTitle.Text = "Error";
}
break;
}
switch (Buttons)
{
case MessageButtons.OkCancel:
btnYes.Visibility = Visibility.Collapsed; btnNo.Visibility = Visibility.Collapsed;
break;
case MessageButtons.YesNo:
btnOk.Visibility = Visibility.Collapsed; btnCancel.Visibility = Visibility.Collapsed;
break;
case MessageButtons.Ok:
btnOk.Visibility = Visibility.Visible;
btnCancel.Visibility = Visibility.Collapsed;
btnYes.Visibility = Visibility.Collapsed; btnNo.Visibility = Visibility.Collapsed;
break;
}
}
private void btnYes_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = true;
this.Close();
}
private void btnCancel_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
this.Close();
}
private void btnOk_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = true;
this.Close();
}
private void btnNo_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
this.Close();
}
private void btnClose_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
this.Close();
}
}
public enum MessageType
{
Info,
Confirmation,
Success,
Warning,
Error,
}
public enum MessageButtons
{
OkCancel,
YesNo,
Ok,
}
we can call it like
private void Button_Close(object sender, RoutedEventArgs e)
{
bool? Result = new MessageBoxCustom("Are you sure, You want to close
application ?", MessageType.Confirmation, MessageButtons.YesNo).ShowDialog();
if (Result.Value)
{
Application.Current.Shutdown();
}
}

Consider using this package that has the following extra benefit features:
Custom styles for border window, message foreground and background, title foreground and background, border, etc
Button to copy message box details to clipboard
Scrollable message box content
Message content is .NET UIElement which can host any content

My WPF ChromeWindow is slightly off when maximized

So I built this sample application and using a custom WindowChrome with WPF and C#. Everytime I try to maximize my window using the buttons I made, the maximized window becomes slightly off? Like by a few pixels. What is happening?
<Window x:Class="TestApp.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:TestApp"
mc:Ignorable="d"
Title="TestApp"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
MinHeight="500" MinWidth="940">
<WindowChrome.WindowChrome>
<WindowChrome
ResizeBorderThickness="6"
CaptionHeight="20"
GlassFrameThickness="0"
CornerRadius="0"
/>
</WindowChrome.WindowChrome>
<!-- Application -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="26" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- WindowChrone Header -->
<Grid Background="{StaticResource WindowChromeBrush}" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="RelayC" />
<Button Click="MinimizeWindow" Grid.Column="2" Style="{StaticResource WindowChromeButton}">
<Image Source="{StaticResource window_minimize_icon}"/>
</Button>
<Button Click="MaximizeWindow" Grid.Column="3" Style="{StaticResource WindowChromeButton}">
<Image Source="{StaticResource window_maximize_icon}" />
</Button>
<Button Click="CloseWindow" Grid.Column="4" Style="{StaticResource WindowChromeButton}">
<Image Source="{StaticResource window_close_icon}" />
</Button>
</Grid>
<!--- Main Content -->
<Grid Grid.Row="1">
</Grid>
</Grid>
</Window>
Here is my sample code for the Button Functions:
private void MinimizeWindow(object sender, RoutedEventArgs e) => this.WindowState = WindowState.Minimized;
private void MaximizeWindow(object sender, RoutedEventArgs e) => this.WindowState = WindowState.Maximized;
private void CloseWindow(object sender, RoutedEventArgs e) => this.Close();
What am I doing wrong?

I ended up finding a sort of elegant solution to this problem. I simply assigned a name to the outermost grid, detected whenever it was maximized and added a margin to make sure the application was fully encompassing the screen and not going over. Then, when the screen size changed, I would remove said margin.
Here is some of my code:
Main functions:
private bool isMaximized = false;
private void CheckMaximizeChange(object sender, SizeChangedEventArgs e)
{
if (WindowState == WindowState.Maximized || (isMaximized && WindowState != WindowState.Minimized)) ChangeWindow();
}
private void MaximizeWindow(object sender, RoutedEventArgs e) => this.WindowState ^= WindowState.Maximized;
private void ChangeWindow()
{
isMaximized = !isMaximized;
MaximizeImageButton.Source = FindResource(MaximizeImageButton.Source == FindResource("window_maximize_icon") ? "window_restore_icon" : "window_maximize_icon") as DrawingImage;
MainGrid.Margin = new Thickness(MainGrid.Margin == new Thickness(0) ? 7 : 0);
}
then in the constructor of the application:
SizeChanged += CheckMaximizeChange;

WPF marquee text animation scrolls across other controls

I implemented the solution for this question, in a window with XAML given below. I am trying to make a scrolling marquee text effect for a label:
<Window x:Class="WpfMarqueeText.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfMarqueeText="clr-namespace:WpfMarqueeText"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Background="Aqua">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Ellipse Grid.Column="0" Margin="5,3,5,3" Fill="#b933ad"/>
<Label Grid.Column="0" Content="Z" Foreground="White" FontFamily="HelveticaBold" FontSize="150" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,3,5,3"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Some Info:" FontFamily="HelveticaBold" FontSize="18" FontWeight="Bold" Margin="5,3,5,3"/>
<StackPanel Grid.Row="0" Grid.Column="1" Orientation="Horizontal" x:Name="stack">
<StackPanel.Resources>
<wpfMarqueeText:NegatingConverter x:Key="NegatingConverter" />
<Storyboard x:Key="slide">
<DoubleAnimation From="0" To="{Binding Width, ElementName=canvas, Converter={StaticResource NegatingConverter}}" Duration="00:00:10"
Storyboard.TargetProperty="X"
Storyboard.TargetName="transferCurreny"
RepeatBehavior="Forever"/>
</Storyboard>
</StackPanel.Resources>
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transferCurreny" X="0"/>
</StackPanel.RenderTransform>
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<BeginStoryboard Storyboard="{StaticResource slide}" />
</EventTrigger>
<EventTrigger RoutedEvent="StackPanel.SizeChanged">
<BeginStoryboard Storyboard="{StaticResource slide}" />
</EventTrigger>
</StackPanel.Triggers>
<Canvas x:Name="canvas" Width="{Binding ActualWidth, ElementName=stack}">
<Label FontFamily="HelveticaBold" FontSize="18" Margin="5,3,5,3" x:Name="Label1" Content="Blah blah blah" Canvas.Left="0"/>
<Label Name="Label2" Content="{Binding Content, ElementName=Label1}" FontFamily="HelveticaBold" FontSize="18" Margin="5,3,5,3" Canvas.Left="{Binding ActualWidth, ElementName=stack}"/>
</Canvas>
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>
</Window>
You must also define the NegatingConverter class in the code-behind:
public class NegatingConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is double)
{
return -((double)value);
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is double)
{
return +(double)value;
}
return value;
}
}
This produces the desired efect, however the text animation scrolls over the other UI elements as seen in the images below (sorry, I don't have enough rep to post images):
http://tinypic.com/r/df8zeu/9
http://tinypic.com/r/2inc3r/9
So, is there any way to fix the animation so that the text only scrolls within the boundary of the grid column it is contained within, or within the boundaries of the label itself? Thanks for any help!

This is a quick and dirty-solution:
Change your Label to
<Label Grid.Row="0" Grid.Column="0" Content="Some Info:" FontFamily="HelveticaBold" FontSize="18" FontWeight="Bold" Margin="5,3,5,3" Panel.ZIndex="99" Background="Aqua"/>
The Panel.ZIndex brings the Label to front. And making the Background not Transparent gives the desired look. The boundries are still not perfect, but this should give you a clue on how to handle Layers

The article linked by Akanksha in response to my OP shows how to create a user control that produces a clean, scrolling text effect. You can also specify 4 different scroll directions, left <-> right and up <-> down. I'll give my implementation here for others:
XAML for MarqueeTextUserControl:
<UserControl x:Class="AaronLuna.Common.UI.UserControls.MarqueeTextUserControl"
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"
mc:Ignorable="d" Loaded="UserControl_Loaded">
<Canvas ClipToBounds="True" Name="CanvasMain">
<TextBlock Name="TextBlockMain"/>
</Canvas>
</UserControl>
Code for MarqueeTextUserControl:
namespace AaronLuna.Common.UI.UserControls
{
public partial class MarqueeTextUserControl
{
public MarqueeTextUserControl()
{
InitializeComponent();
CanvasMain.Height = Height;
CanvasMain.Width = Width;
}
public ScrollDirection ScrollDirection { get; set; }
public double ScrollDurationInSeconds { get; set; }
public String Text { set { TextBlockMain.Text = value; }}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
ScrollText(ScrollDirection);
}
public void ScrollText(ScrollDirection scrollDirection)
{
switch (scrollDirection)
{
case ScrollDirection.LeftToRight:
LeftToRightMarquee();
break;
case ScrollDirection.RightToLeft:
RightToLeftMarquee();
break;
case ScrollDirection.TopToBottom:
TopToBottomMarquee();
break;
case ScrollDirection.BottomToTop:
BottomToTopMarquee();
break;
}
}
private void LeftToRightMarquee()
{
double height = CanvasMain.ActualHeight - TextBlockMain.ActualHeight;
TextBlockMain.Margin = new Thickness(0, height/2, 0, 0);
var doubleAnimation = new DoubleAnimation
{
From = -TextBlockMain.ActualWidth,
To = CanvasMain.ActualWidth,
RepeatBehavior = RepeatBehavior.Forever,
Duration = new Duration(TimeSpan.FromSeconds(ScrollDurationInSeconds))
};
TextBlockMain.BeginAnimation(Canvas.LeftProperty, doubleAnimation);
}
private void RightToLeftMarquee()
{
double height = CanvasMain.ActualHeight - TextBlockMain.ActualHeight;
TextBlockMain.Margin = new Thickness(0, height/2, 0, 0);
var doubleAnimation = new DoubleAnimation
{
From = -TextBlockMain.ActualWidth,
To = CanvasMain.ActualWidth,
RepeatBehavior = RepeatBehavior.Forever,
Duration = new Duration(TimeSpan.FromSeconds(ScrollDurationInSeconds))
};
TextBlockMain.BeginAnimation(Canvas.RightProperty, doubleAnimation);
}
private void TopToBottomMarquee()
{
double width = CanvasMain.ActualWidth - TextBlockMain.ActualWidth;
TextBlockMain.Margin = new Thickness(width/2, 0, 0, 0);
var doubleAnimation = new DoubleAnimation
{
From = -TextBlockMain.ActualHeight,
To = CanvasMain.ActualHeight,
RepeatBehavior = RepeatBehavior.Forever,
Duration = new Duration(TimeSpan.FromSeconds(ScrollDurationInSeconds))
};
TextBlockMain.BeginAnimation(Canvas.TopProperty, doubleAnimation);
}
private void BottomToTopMarquee()
{
double width = CanvasMain.ActualWidth - TextBlockMain.ActualWidth;
TextBlockMain.Margin = new Thickness(width/2, 0, 0, 0);
var doubleAnimation = new DoubleAnimation
{
From = -TextBlockMain.ActualHeight,
To = CanvasMain.ActualHeight,
RepeatBehavior = RepeatBehavior.Forever,
Duration = new Duration(TimeSpan.FromSeconds(ScrollDurationInSeconds))
};
TextBlockMain.BeginAnimation(Canvas.BottomProperty, doubleAnimation);
}
}
public enum ScrollDirection
{
LeftToRight,
RightToLeft,
TopToBottom,
BottomToTop
}
}
Client XAML:
<UserControl x:Class="MarqueeTextExampleUserControl"
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:userControls="clr-namespace:AaronLuna.Common.UI.UserControls;assembly=AaronLuna.Common"
mc:Ignorable="d">
<DockPanel>
<Label Content="Some Info:"/>
<userControls:MarqueeTextUserControl x:Name="MarqueeTextBlock"/>
</DockPanel>
</UserControl>
Client Code:
MarqueeTextBlock.Text = "Blah blah blah";
MarqueeTextBlock.ScrollDirection = ScrollDirection.RightToLeft;
MarqueeTextBlock.ScrollDurationInSeconds = 10;

Grid Splitter working on diagonal?

I'm trying to do a Window with a transparent square inside it, and I want to allow the user to re-size it in whatever way s/he wants. This code is working for vertical and horizontal re-size
<Window x:Class="TransparentWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="PloofTAS" Height="355" Width="539" Topmost="True"
ResizeMode="NoResize"
AllowsTransparency="True"
Background="Transparent"
WindowStyle="None" MouseLeftButtonDown="Window_MouseLeftButtonDown">
<Grid Name="GlobalGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="8" />
<RowDefinition Height="*" />
<RowDefinition Height="8" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="8" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="8" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Gray" Grid.Column="0" Grid.RowSpan="5" />
<Rectangle Fill="Gray" Grid.Column="4" Grid.RowSpan="5" />
<Rectangle Fill="Gray" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="3" />
<Rectangle Fill="Gray" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="3" />
<GridSplitter Grid.Column="2" Grid.Row="1" Height="Auto" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Column="1" Grid.Row="2" Height="Auto" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Column="3" Grid.Row="2" Height="Auto" HorizontalAlignment="Stretch" />
<GridSplitter Grid.Column="2" Grid.Row="3" Height="Auto" HorizontalAlignment="Stretch" />
<Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1" />
<Rectangle Fill="Orange" Grid.Row="1" Grid.Column="3" />
<Rectangle Fill="Orange" Grid.Row="3" Grid.Column="1" />
<Rectangle Fill="Orange" Grid.Row="3" Grid.Column="3" />
<Rectangle Fill="Transparent" Stroke="Red" Grid.Column="2" Grid.Row="2"/>
</Grid>
</Window>
Here is the resulting window
I'd like for the orange squares (the corners of the red/transparent square) to be able to work diagonally, or both vertical and horizontal. Is it possible?

I don't know elegant solution for this problem as GridSplitter is not possible to set up programmatically.
My solution is just dirty mouse capture and set Column and Row measures according to mouse movement.
Set style and events. Tag property store index of a row and column we gonna to change in code behind.
<Window.Resources>
<Style x:Key="DiagonalSplitterRectangle" TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="Orange"/>
<EventSetter Event="MouseDown" Handler="UIElement_OnMouseDown"/>
<EventSetter Event="MouseMove" Handler="UIElement_OnMouseMove"/>
<EventSetter Event="MouseUp" Handler="UIElement_OnMouseUp"/>
<EventSetter Event="LostMouseCapture" Handler="UIElement_OnLostMouseCapture"/>
</Style>
</Window.Resources>
<Rectangle Grid.Row="1" Grid.Column="1" Style="{StaticResource DiagonalSplitterRectangle}" Tag="0,0"/>
<Rectangle Grid.Row="1" Grid.Column="3" Style="{StaticResource DiagonalSplitterRectangle}" Tag="0,4"/>
<Rectangle Grid.Row="3" Grid.Column="1" Style="{StaticResource DiagonalSplitterRectangle}" Tag="4,0"/>
<Rectangle Grid.Row="3" Grid.Column="3" Style="{StaticResource DiagonalSplitterRectangle}" Tag="4,4"/>
Simple mouse capture events:
private bool _isMouseCaptured;
public MainWindow()
{
InitializeComponent();
}
private void UIElement_OnMouseDown(object sender, MouseButtonEventArgs e)
{
var uiElement = sender as UIElement;
if (uiElement == null)
return;
if (uiElement.CaptureMouse())
_isMouseCaptured = true;
}
private void UIElement_OnMouseMove(object sender, MouseEventArgs e)
{
if (!_isMouseCaptured)
return;
var clientWindow = Content as FrameworkElement;
if (clientWindow == null)
return;
var rectangle = sender as Rectangle;
if (rectangle == null)
return;
Point position = Mouse.GetPosition(GlobalGrid); ;
if (position.X < 0 || position.Y < 0 || position.X > clientWindow.ActualWidth || position.Y > clientWindow.ActualHeight)
return;
GridUpdate(position, rectangle, clientWindow);
}
private void UIElement_OnMouseUp(object sender, MouseButtonEventArgs e)
{
if (!_isMouseCaptured)
return;
var uiElement = sender as UIElement;
if (uiElement == null)
return;
uiElement.ReleaseMouseCapture();
}
private void UIElement_OnLostMouseCapture(object sender, MouseEventArgs e)
{
_isMouseCaptured = false;
}
Resize grid columns and rows according to value stored in rectangle.Tag property.
For correct behavior was needed to change opposite column and row measures too.
private void GridUpdate(Point position, Rectangle rectangle, FrameworkElement clientWindow)
{
var gridPosition = new GridPosition(rectangle.Tag.ToString());
var oppositeGridPosition = GetOppositeGridPosition(gridPosition);
var rowHeight = GetMeasure(gridPosition.Row, position.Y, clientWindow.ActualHeight);
var columnWidth = GetMeasure(gridPosition.Column, position.X, clientWindow.ActualWidth);
var oppositeRowHeight = GlobalGrid.RowDefinitions[oppositeGridPosition.Row].ActualHeight;
var oppositeColumnWidth = GlobalGrid.ColumnDefinitions[oppositeGridPosition.Column].ActualWidth;
GlobalGrid.RowDefinitions[gridPosition.Row].Height = new GridLength(rowHeight);
GlobalGrid.ColumnDefinitions[gridPosition.Column].Width = new GridLength(columnWidth);
GlobalGrid.RowDefinitions[oppositeGridPosition.Row].Height = new GridLength(oppositeRowHeight);
GlobalGrid.ColumnDefinitions[oppositeGridPosition.Column].Width = new GridLength(oppositeColumnWidth);
}
private GridPosition GetOppositeGridPosition(GridPosition gridPosition)
{
var row = (gridPosition.Row == 0) ? 4 : 0;
var column = (gridPosition.Column == 0) ? 4 : 0;
return new GridPosition(row, column);
}
private double GetMeasure(int gridPosition, double position, double windowMeasure)
{
return gridPosition == 0 ? position : windowMeasure - position;
}
GridPosition is structure that stores column and row index values.
public struct GridPosition
{
public int Row { get; private set; }
public int Column { get; private set; }
public GridPosition(int row, int column)
: this()
{
Row = row;
Column = column;
}
public GridPosition(string gridPostion)
: this()
{
Row = Convert.ToInt32(gridPostion.Split(',')[0]);
Column = Convert.ToInt32(gridPostion.Split(',')[1]);
}
}

NullReferenceException in DragDrop after adding Items to ListBox

I am trying to implement a dynamic ListBox that contains the "open files" of my program. Those files can be dragged from the ListBox into one of four Canvases.
That works all fine as long as the items are added in XAML before starting the program, however, once I add items to the ListBox via fileList.Items.Add("myitemname"); I get a NullReferenceException if I try to drop (dragging works) them into the Canvas at
DragDrop.DoDragDrop(listBox, dragData, DragDropEffects.Move);
Here the relevant part of my code:
public partial class MainWindow : Window
{
InitialDataObject _initData = new InitialDataObject();
public MainWindow()
{
InitializeComponent();
}
#region DragImage
private void DragImageStart(object sender, MouseButtonEventArgs e)
{
_initData._mousePoint = e.GetPosition(null);
}
private void DragImageMove(object sender, MouseEventArgs e)
{
Point mousePos = e.GetPosition(null);
Vector diff = _initData._mousePoint - mousePos;
if (e.LeftButton == MouseButtonState.Pressed && (
Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance) && ((sender as ListBox).SelectedItem != null))
{
var listBox = sender as ListBox;
var listBoxItem = listBox.SelectedItem;
DataObject dragData = new DataObject(_initData._dropIdentifier, listBoxItem);
DragDrop.DoDragDrop(listBox, dragData, DragDropEffects.Move);
}
}
private void CanvasDrop(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent(_initData._dropIdentifier))
{
var item = e.Data.GetData(_initData._dropIdentifier) as ListBoxItem;
(sender as Canvas).Background = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
DropImage(sender as Canvas, item);
fileList.UnselectAll();
}
}
private void CanvasDragEnter(object sender, DragEventArgs e)
{
if (!e.Data.GetDataPresent(_initData._dropIdentifier) || sender == e.Source)
{
(sender as Canvas).Background = new SolidColorBrush(Color.FromArgb(255, 240, 240, 240));
e.Effects = DragDropEffects.None;
}
}
private void DropImage(Canvas targetCanvas, ListBoxItem item)
{
//just to check if I got the right item in this method
MessageBox.Show(item.Content.ToString());
}
private void CanvasDragLeave(object sender, DragEventArgs e)
{
if (!e.Data.GetDataPresent(_initData._dropIdentifier) || sender == e.Source)
{
(sender as Canvas).Background = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
}
}
#endregion
private void sdfsdf(object sender, RoutedEventArgs e)
{
fileList.Items.Add("test");
}
}
class InitialDataObject
{
public Point _mousePoint = new Point();
public readonly string _dropIdentifier = "dropIdentifier";
}
XAML:
<Grid Height="Auto" HorizontalAlignment="Stretch" Margin="0,23,0,0" Name="gridSubmain" VerticalAlignment="Stretch" Width="Auto" Panel.ZIndex="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" MaxWidth="250" MinWidth="250" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ListBox Height="Auto" Name="fileList" Width="Auto" Background="#FFE6E6E6" BorderBrush="{x:Null}" Panel.ZIndex="1" PreviewMouseLeftButtonDown="DragImageStart" PreviewMouseMove="DragImageMove" FontSize="16" ItemsSource="{Binding}" Margin="0" Grid.Row="2">
<ListBoxItem Content="dfgdfg" />
<ListBoxItem Content="sfsdf" />
<ListBoxItem Content="ghjgh" />
<ListBoxItem Content="cvbcvb" />
</ListBox>
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="112,196,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="sdfsdf" />
</Grid>
<Grid Grid.Column="1" Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="gridImage" VerticalAlignment="Stretch" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage1" VerticalAlignment="Stretch" Width="Auto" AllowDrop="True" Drop="CanvasDrop" DragEnter="CanvasDragEnter" Background="White" DragLeave="CanvasDragLeave" />
<Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage2" VerticalAlignment="Stretch" Width="Auto" Drop="CanvasDrop" DragEnter="CanvasDragEnter" Grid.Column="1" AllowDrop="True" Background="White" DragLeave="CanvasDragLeave"/>
<Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage3" VerticalAlignment="Stretch" Width="Auto" Drop="CanvasDrop" DragEnter="CanvasDragEnter" Grid.Row="1" AllowDrop="True" Background="White" DragLeave="CanvasDragLeave"/>
<Canvas Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="canvasImage4" VerticalAlignment="Stretch" Width="Auto" Drop="CanvasDrop" DragEnter="CanvasDragEnter" Grid.Column="1" Grid.Row="1" AllowDrop="True" Background="White" DragLeave="CanvasDragLeave"/>
</Grid>
Any ideas why it is working with existing items but not with ones added via fileList.Items.Add("..");? Also, with existing Items the fileList.UnselectAll(); works fine, but the extra added items stay selected and I can't get rid of the selection.

Problem in you CanvasDrop method. You expect ListBoxItem there, but get string, because SelectedItem property of list box have different values for items you create in xaml and items you add dynamically.