Handle drag shape that be overlap - wpf

i 'm doing a program that user could drag this shape.
The shape is:
It could be joined each other for making new block.
But the problem is, when i drag two [Blue] Shape into the [If] Shape, i cant not drag the [Blue] anymore, cause of the [If] Shape is collapsed and make the [Blue] Shape cant not be interact.
Here is my code:
The define of the shape
<UserControl x:Class="SampleCode.ActionShape"
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:SampleCode"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d" >
<UserControl.Resources>
<local:ColorToBrushConverter x:Key="colorToBrushConverter"/>
<local:ThicknessConverter x:Key="thicknessConverter"/>
</UserControl.Resources>
<Grid>
<Path Data="{Binding SvgData}"
Fill="{Binding Color, Converter={StaticResource colorToBrushConverter}}"
Cursor="Hand">
</Path>
<TextBlock Foreground="{Binding TextColor, Converter={StaticResource colorToBrushConverter}}" FontSize="{Binding FontSize}" Margin="{Binding MarginText}" Text="{Binding Text}"></TextBlock>
</Grid>
</UserControl>
The mainwindow.xaml
<Window x:Class="SampleCode.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SampleCode"
Title=""
Width="1400"
Height="800"
Loaded="Window_Loaded">
<Window.Resources>
<local:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
<DataTemplate DataType="{x:Type local:BaseShapeMVVm}">
<local:ActionShape AllowDrop="True" MouseDown="Rectangle_MouseDown" MouseMove="Rectangle_MouseMove" MouseUp="Rectangle_MouseUp"></local:ActionShape>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:ViewModel />
</Window.DataContext>
<Grid>
<TreeView Name="ListBox" ItemsSource="{Binding Rectangles}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter
Property="Canvas.Left" Value="{Binding X}"/>
<Setter
Property="Canvas.Top" Value="{Binding Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
</TreeView>
</Grid>
</Window>
could you give me some recommendation for this problem? i 'm very appoxiated

Related

WPF Can't Remove Red Border from UserControl

I've built a simple login page and when invalid input is detected, a red border is drawn around the usercontrol.
Here is my layout code:
<UserControl x:Class="WPFTest.UI.Views.EmptyLayout"
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:WPFTest.UI.Views"
xmlns:vm="clr-namespace:WPFTest.UI.ViewModels"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance Type=vm:EmptyLayoutViewModel}"
Background="White"
>
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" FontSize="20" FontWeight="Bold">Test Sales Estimator</TextBlock>
<ContentControl Content="{Binding Layout}" Grid.Row="1">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type vm:LoginViewModel}">
<local:LoginView/>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Grid>
</UserControl>
And here is the login view:
<UserControl
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:WPFTest.UI.Views" xmlns:viewmodels="clr-namespace:WPFTest.UI.ViewModels"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" x:Class="WPFTest.UI.Views.LoginView"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Background="White"
d:DataContext="{d:DesignInstance Type={x:Type viewmodels:LoginViewModel}}"
Margin="20 0 0 0"
Padding="10"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="2" Margin="0 50 0 0">
<TextBlock Text="Welcome" FontSize="17" Grid.Row="1" Margin="0 0 0 20" Height="50"/>
<StackPanel>
<TextBlock Text="Username" />
<TextBox Text="{Binding Username}"/>
</StackPanel>
<StackPanel Grid.Row="2" Margin="0 10 0 0">
<TextBlock Text="Password" />
<PasswordBox x:Name="Password" PasswordChanged="PasswordBox_PasswordChanged" >
</PasswordBox>
</StackPanel>
<Button
Grid.Row="2"
Margin="0 20 0 0"
Padding="5 2"
HorizontalAlignment="Left"
Command="{Binding HandleLoginCommand}"
IsEnabled="{Binding CanLogin}"
Content="Login">
</Button>
</StackPanel>
</Grid>
</UserControl>
I have tried to override the border with the following template:
<Style TargetType="views:LoginView">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
But the border remains red. I've also tried changing the target on the template to things like UserControl, and ContentControl. I've also tried setting the Validation.ErrorTemplate attribute to {x:Null} on both the UserControl and on the element inside the layout usercontrol.
For the LoginViewModel, I am using the CommunityToolkit.Mvvm's ObservableValidator as my base class, so it handles the validation logic and here is my Username property.
private string _username;
[Required]
[MinLength(4)]
public string Username
{
get { return _username; }
set {
SetProperty(ref _username, value, true);
OnPropertyChanged(nameof(HandleLoginCommand));
}
}
The border is from your contentcontrol.
Set Validation.ErrorTemplate="{x:Null}" on that.
You can just use a contentpresenter.
<ContentPresenter Content="{Binding Layout}" Grid.Row="1"
Validation.ErrorTemplate="{x:Null}">
<ContentPresenter.Resources>
<DataTemplate DataType="{x:Type local:LoginViewModel}">
<local:LoginView/>
</DataTemplate>
</ContentPresenter.Resources>
</ContentPresenter>
I have a simplified layout to explore this, but the outer red border does not appear when I make that change.
The validation decoration does not use the control's Border(Thcikness/Brush). It is instead a separate Visual that is drawn in a separate AdornerLayer. To modify its looks, you should pass a dedicated template for the ErrorTemplate like this: (example for TextBox)
<Style TargetType="TextBox">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border BorderBrush="Yellow" BorderThickness="3">
<AdornedElementPlaceholder x:Name="AdornedElementPlaceholder" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To actually remove the border, try setting Validation.ErrorTemplate to {x:Null}.

How can i set different names to DataTemplate elements?

i'm making something like TicTacToeGame, trying to use MVVM and at this point i faced a problem. I can't understand how can i (if it's even possible), set different names to different DataTempalte elements("Buttons" to be exact).
<Window x:Class="TicTacToeCommand.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:TicTacToeCommand"
mc:Ignorable="d"
Title="MainWindow" Height="500" Width="400"
Background="White"
Name="mainW">
<Window.Resources>
<Style x:Key="ButtonsStyle" TargetType="Button">
<Setter Property="Command" Value="{Binding ElementName=mainW, Path=DataContext.GetButtonPressCommand}"></Setter>
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="Background" Value="Black"></Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="47*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<ItemsControl Grid.Row="0" ItemsSource="{Binding ButtonsList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Content}"
Name="b1"
Style="{StaticResource ButtonsStyle}"
CommandParameter="{Binding ElementName=b1, Path=Name}">
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="3" Columns="3" Name="uniformGrid1">
</UniformGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
That's my XAML code.
And also, i'm trying to send the name as a Command Parameter in a Command, but im allways getting "b1" name, because they all getting it and i need them all to have different name...
If it is possible how after this I send these names to command?
I will be very grateful for the help, and please excuse me in advance for possible mistakes.
element name, especially in template, doesn't help a lot
<Button Content="{Binding Content}"
Name="b1"
Style="{StaticResource ButtonsStyle}"
CommandParameter="{Binding ElementName=b1, Path=Name}">
button is bound to some item here. why not send that item as CommandParameter?
<Button Content="{Binding Content}"
Style="{StaticResource ButtonsStyle}"
CommandParameter="{Binding Path=.}">
then in view model you can cast to item type and get acces to all its properties (Content, etc)

WPF Treeview Icon Plus Minus

I'm trying to add icons in my treeview but it's not showing up. The HierarchicalDataTemplate is in the windows resources and treeview is in the Grid.
Can any body tell me what is the mistake i'm making?
Here is the XML:
<Window x:Class="Treeview.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Support" Height="700" Width="1024" SizeToContent="WidthAndHeight"
mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="229" Icon="/Test;component/Images/Treeview.jpg">
<Window.Resources>
<XmlDataProvider x:Key="questions" XPath="Questions/Question" />
<HierarchicalDataTemplate x:Key="rootTemplate">
<HierarchicalDataTemplate.ItemsSource>
<Binding XPath="child::*" />
</HierarchicalDataTemplate.ItemsSource>
<StackPanel Orientation="Horizontal">
<CheckBox Name="checkBoxTree" Checked="TreeView_Checked" Unchecked="checkBoxTree_Unchecked" />
<Image Style="{StaticResource ExpandingImageStyle}">
<Image.Resources>
<BitmapImage x:Key="Icon_Closed" UriSource="Images/Plus.ico"/>
<BitmapImage x:Key="Icon_Open" UriSource="Images/Minus.ico"/>
</Image.Resources>
</Image>
<TextBlock Text="{Binding XPath=#Name, Mode=TwoWay}" />
<TextBlock>
<Hyperlink NavigateUri="{Binding XPath=#WebSite}" RequestNavigate="Hyperlink_RequestNavigate">
<TextBlock Text="{Binding XPath=#WebSite}" />
</Hyperlink>
</TextBlock>
</StackPanel>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>
<TreeView Name="TreeViewer" HorizontalAlignment="Left" Height="220" Margin="10,116,0,0" Grid.Row="1"
VerticalAlignment="Top" Width="700" Visibility="Collapsed" FontSize="15"
ItemsSource="{Binding Source={StaticResource questions}}" ItemTemplate="{StaticResource rootTemplate}" >
<TreeView.Resources>
<Style x:Key="ExpandingImageStyle" TargetType="{x:Type Image}">
<Setter Property="Source" Value="{DynamicResource Icon_Closed}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsExpanded}" Value="True">
<Setter Property="Source" Value="{DynamicResource Icon_Open}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TreeView.Resources>
</TreeView>
</Grid>
</Window>
Surely with that XAML you have a Warning shown in the Visual Studio Error List like the following?:
The resource "ExpandingImageStyle" could not be resolved.
This is telling you that your HierarchicalDataTemplate can't find the Resource. If you move that Style to the top of your Window.Resources, the first problem should disappear. However, when you do that, you'll then get a warning that the Style can't find the two BitmapImage Resources. So you'd better move those two Resources to the top of your Window.Resources:
<BitmapImage x:Key="Icon_Closed" UriSource="Images/Plus.ico"/>
<BitmapImage x:Key="Icon_Open" UriSource="Images/minus.ico"/>
<Style x:Key="ExpandingImageStyle" TargetType="{x:Type Image}">
...
</Style>
<XmlDataProvider x:Key="questions" XPath="Questions/Question" />
<HierarchicalDataTemplate x:Key="rootTemplate">
...
<Image Style="{StaticResource ExpandingImageStyle}" />
...
</HierarchicalDataTemplate>
If you find that that still doesn't work, please take a look at any errors or warnings that you may get in either the Error List or Output Window in Visual Studio and let us know.

ListBox content not completely stretching across listbox

I am trying to make a list box where I have complete control over the look of each item in the list box.
I can make the item horizontally stretch. However, there's this thin sliver of blue to the left of a selected item. (In the picture, the middle item is selected).
Can I make this blue strip go away?
alt text http://img44.imageshack.us/img44/949/boundlistboxdisplay.jpg
Here's the complete code.
<Window x:Class="SimpleListTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Window.Resources>
<XmlDataProvider x:Key="DcCharacters">
<x:XData>
<Characters xmlns="">
<Character HeroName="Catwoman" Identity="Selina Kyle" />
<Character HeroName="Batman" Identity="Bruce Wayne" />
<Character HeroName="Starman" Identity="Jack Knight" />
</Characters>
</x:XData>
</XmlDataProvider>
</Window.Resources>
<Grid>
<ListBox
ItemsSource="{Binding Source={StaticResource DcCharacters}, XPath=//Characters/*}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Label
Content="{Binding XPath=#HeroName}"
Height="40"
VerticalContentAlignment="Center"
Background="LightGreen"
BorderThickness="2"
BorderBrush="DarkGreen"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
Here is an update for your code.
<Window x:Class="SimpleListTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<XmlDataProvider x:Key="DcCharacters">
<x:XData>
<Characters xmlns="">
<Character HeroName="Catwoman" Identity="Selina Kyle" />
<Character HeroName="Batman" Identity="Bruce Wayne" />
<Character HeroName="Starman" Identity="Jack Knight" />
</Characters>
</x:XData>
</XmlDataProvider>
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="Padding" Value="0,0,0,0"/>
</Style>
</Window.Resources>
<Grid>
<ListBox
ItemsSource="{Binding Source={StaticResource DcCharacters}, XPath=//Characters/*}"
ItemContainerStyle="{StaticResource ContainerStyle}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Label
Content="{Binding XPath=#HeroName}"
Height="40"
VerticalContentAlignment="Center"
Background="LightGreen"
BorderThickness="2"
BorderBrush="DarkGreen"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
This may solve your problem.

Data-based template selection in WPF

I have this simple XAML example:
<Window x:Class="DynTemplateTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="30" Height="30" Fill="Red"></Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Position}"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<DockPanel LastChildFill="True">
<ContentPresenter
Content="{Binding Path=Items}"
ContentTemplate="{StaticResource ItemTemplate}"
>
</ContentPresenter>
</DockPanel>
</Window>
It is rendering my items in the observable collection in MVVM style. Each item is having its horizontal position in a property. Each item also has a property IsSpecial which tells if it wants to be rendered in some special way. I want ordinary items (IsSpecial=false) render as red squares (already in the code) and special items as blue circles with "special" text inside.
What I do not know is how to adjust the XAML code to do the template selection for the items. Is there a way to do that without coding my own ItemTemplateSelector? Will it still work with the canvas positioning based on binding. I think that the solution is to extract the item template to a separate template, create one more template for special items and then somehow play with triggers ... but it is not very easy for me as I am a WPF beginner at the moment.
The other thing is that I quite dislike the way how the Position is passed to the items. Is there some other way?
Are there any other recommendations how to improve the code?
I solved it myself :D
<Window x:Class="DynTemplateTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="NormalItem">
<Rectangle Width="30" Height="30" Fill="Red"></Rectangle>
</DataTemplate>
<DataTemplate x:Key="SpecialItem">
<Rectangle Width="30" Height="30" Fill="Red"></Rectangle>
</DataTemplate>
<DataTemplate x:Key="ItemTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Content="{Binding}" ContentTemplate="{StaticResource NormalItem}" x:Name="ItemsContentControl" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSpecial}" Value="true">
<Setter TargetName="ItemsContentControl" Property="ContentTemplate" Value="{StaticResource SpecialItem}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Position}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</DataTemplate>
</Window.Resources>
<DockPanel LastChildFill="True">
<ContentPresenter
Content="{Binding Path=Items}"
ContentTemplate="{StaticResource ItemTemplate}"
>
</ContentPresenter>
</DockPanel>
</Window>
But still, any thoughts on alternatives or improvements?

Resources