DropShadowEffect applying to child elements - Silverlight XAML - silverlight

I have an ItemsControl which contains some nested containers. I want to add a dropshadow around each element of the main ItemsControl. But instead it is adding it to certain containers that are within the main ItemsControl (creating rows of shadows). I have placed the effect at a number of different levels but it results in no change. I started out with the outermost container of the item within the main ItemsControl and went upward from there.
Here is where I currently have the effect for the drop shadow placed:
<ItemsControl >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<!-- I have tried adding the dropshadow effect within this stackpanel -->
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- Where I define the dropshadow -->
<ItemsControl.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="1" Color="LightGray"/>
</ItemsControl.Effect>
<!-- End of dropshadow definition -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<media:Step5Item />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
And here is the definition for Step5Item, I added documentation for where the shadows are appearing: (edit) I removed the content for the elements since that was just styling and so forth.
<!-- This is inserted by the above code's DataTemplate -->
<!-- I have tried adding a border here and giving it a dropshadow effect -->
<Grid >
<!-- I have tried inserting a dropshadow effect here -->
<TextBlock Grid.Row="0"/>
<Border BorderBrush="LightGray" BorderThickness="1" >
<!-- I have tried inserting a dropshadow effect here -->
<Grid>
<Border >
<!-- There is a shadow around this border/grid -->
<Grid Grid.Row="0" >
<TextBlock Grid.Column="0" />
<Button Grid.Column="2"/>
</Grid>
</Border>
<!--There is a shadow around each element in this ItemsControl-->
<ItemsControl Grid.Row="2" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,4" >
<Path Grid.Row="0">
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="1500,0"/>
</Path.Data>
</Path>
<Grid Grid.Row="1">
<Image Grid.Column="0" />
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Border>
</Grid>
There is also a shadow at the bottom but I don't know if its from the last element in the ItemsControl or if it is from the outer most border.
If you'd like I can clean up the second code piece more. I took out some stuff but left in the elements, thinking that might be best for readability.
EDIT
I tried applying the effect after I add the child elements hoping that since they would be created before the effect went into play that the problem would not occur. I tried placing the effect at the bottom of both the main ItemsControl as well as at the bottom of the outermost grid in Step5Item. I have also removed some content from Step5Item to make it hopefully more readable.
EDIT2
Here are two images with and without the effect. I left the DropShadow code exactly where I placed it above, though like I said, I can place it in many places to get the same effect.
With Dropshadow
Without Dropshadow
Without Error http://img402.imageshack.us/img402/1456/nodropshadowexample.png
Edit 3
This is the border and drop shadow effect that I am using from Erno's solution. I am hoping to be able to increase the shadowdepth some more because the right side is not getting any shadow, only the bottom. Currently if I change ShadowDepth it changes to location of the shadow to be at a distance away equal to the new size but it is only a thickness of 1.
<Border Margin="0,1,0,0" Height="auto" Width="auto" CornerRadius="5,5,5,5" BorderThickness="1" BorderBrush="LightGray">
<Border.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="1" Direction="315" Color="LightGray"/>
</Border.Effect>
</Border>

Have you tried to do the following?
I added another Grid and added a SIBLING Border with the effect. The grid containing the rows is displayed on top of it but is NOT a child control of the Border.
<ItemsControl Grid.Row="2" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,4" >
<Grid>
<Border>
<Border.Effect>
<DropShadow />
</Border.Effect>
</Border>
<Path Grid.Row="0">
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="1500,0"/>
</Path.Data>
</Path>
<Grid Grid.Row="1">
<Image Grid.Column="0" />
</Grid>
</Grid>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Related

ActualHeight Grows But Doesn't Shrink

I'm experiencing an odd behavior with WPF.
My goal here is to have an ItemsControl with a vertical line on each item's side going from the top to the bottom of the item. Being that the items may vary in height, I'm binding the Line's Y2 property to the ActualHeight of the StackPanel belonging to the Grid.
Here's the XAML:
<ItemsControl Grid.Row="1" BorderThickness="0" ItemsSource="{Binding ShipmentActivity}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Name="ListBox">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Line Stroke="{StaticResource ButtonOutlineBrush}" X1="8" X2="8" Y1="0"
Y2="{Binding ActualHeight, ElementName=ShipmentActivity}"
StrokeThickness="1" />
<StackPanel Grid.Column="1" Margin=".1" x:Name="ShipmentActivity">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</StackPanel.Resources>
<TextBlock Text="{Binding Status}" FontWeight="SemiBold" FontSize="13" />
<TextBlock Text="{Binding Location}" Foreground="Gray"/>
<TextBlock Text="Wed, Sep 13, 2017, 8:29 PM (2 days ago)" Foreground="Gray"/>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Running this at first seems perfect. The problem is noticeable once I start to narrow the width of the window, causing the TextBlocks to wrap, and in effect
causing the items to grow in height, and then resizing the window back to its original width (and beyond). Although the TextBlocks are back to its original state (and height), the height of the items remain the same - stuck at its highest point, leaving huge gaps below the text, while the Line's height doesn't shrink. The Line is definitely the one to blame here, because removing the line removes the issue.
What is even stranger yet, is adding a margin to the StackPanel even the slightest (.1) fixes the issue, and the items shrink back to its intended height.
Am I doing something wrong, or is this a bug?
I would use a Border element to decorate the StackPanel, rather than using a Line. Then just set the BorderThickness property of the Border accordingly.
Hence your XAML would be like this:
<ItemsControl ...>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1,0,0,0"
BorderBrush="{StaticResource ButtonOutlineBrush}">
<StackPanel ...>
You can use the Padding property of the Border and/or the Margin property of the StackPanel to space-out the two elements.

Listbox content not dynamically re-sizing when Listbox size changes

I've seen quite a few people asking this question and i feel like my question is slightly different. I have a listbox that holds a series of identical custom made user controls. These controls are added to the listbox at runtime. Now i currently have my listbox items resizing themselves properly upon first creation and insertion into the control.
Here is the strange part. If I resize the listbox the controls that have been visible previously are not resized to the new listbox width. In other words if i add 12 controls and the box only shows 4 (the rest are hidden by a scrollbar) then if i resize the box the first 4 controls will still be the original width and if i scroll then the other 8 will be the correct size. Also if i manipulate the list items in any way they resize themselves to the proper width automatically. SEE EDIT2
I've tried attaching to the sizeChanged event and issuing the following on both the listbox and the items but it has had no effect. I think i need to find some way of resetting the layout information for the listbox items but i can't find the command.
item.InvalidateArrange();
item.InvalidateMeasure();
Layers.UpdateLayout();
item.UpdateLayout();
I think this has something to do with the items i'm adding because even if i detach the items from the lisbox and then attach them they remain the wrong width.
Here is my listbox code:
<ListBox x:Name="Layers" VerticalContentAlignment="Top" Margin="0,17,0,0" BorderThickness="0,1,0,0" HorizontalContentAlignment="Stretch" SizeChanged="Layers_SizeChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Here is the code for my items
<UserControl x:Class="ListOverlayItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:Data"
HorizontalContentAlignment="Stretch">
<UserControl.Resources>
<data:Translator x:Key="translatorString" />
</UserControl.Resources>
<Border BorderBrush="Silver" BorderThickness="0,0,0,0" Name="border1" HorizontalAlignment="Stretch">
<Grid x:Name="layout" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<!-- Column 0 -->
<ScrollBar Name="arrangeIcon" FlowDirection="LeftToRight" Maximum="10" SmallChange="1" Value="5" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"/>
<!-- Column 1 -->
<Slider Name="OverlayOpacity" Height="25" Grid.Column="1" Margin="6,0,0,0" Grid.Row="1" Maximum="1" LargeChange="0.1" ValueChanged="OverlayOpacity_ValueChanged"/>
<TextBlock x:Name="OverlayName" Text="{Binding Path=LocationName}" Foreground="#FFF08D2D" Margin="10,2,0,0" Grid.Column="1" FontSize="12" Height="18" VerticalAlignment="Top" />
<!-- Column 3 -->
<Button Name="SettingsButton" Grid.Column="3" Content="{Binding TRK_OV_Settings, Source={StaticResource translatorString}}" VerticalAlignment="Center" Click="SettingsButton_Click" />
<CheckBox x:Name="OverlayEnabled" FlowDirection="LeftToRight" Grid.Column="2" DataContext="{Binding}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.RowSpan="2" Checked="OverlayEnabled_Checked" Unchecked="OverlayEnabled_Unchecked" />
<TextBlock Name="percentage" Text="100%" FontSize="9" TextAlignment="Right" Grid.Column="2" Grid.Row="1" VerticalAlignment="Center" Margin="2,6,26,6" MinWidth="30"/>
</Grid>
</Border>
Again it seems like my UserControl is correctly able to scale itself its just not getting the command to do so when the parent container is resized.
EDIT: Whoops, removed the WPF tag because it was incorrectly added. I think i've got it down to slider being the culprit. If i set the slider to a fixed size instead of 'stretch' then the item correctly scales just fine. So the question now is how do i force the slider to resize itself.
EDIT2: I know what is causing the issue but i don't know how to solve it. What is happening is the slider that i have in my user control will NOT resize along with the rest of the control unless i change the value of the slider during the resize. The instant i change its value even a fraction it resizes itself automatically. How can i force it to resize?
I determined that the slider was causing the issue and i tried many ways to force the slider to re-draw when it needed to but i was unsuccessful. My final solution was to remove the slider entirely. Works fine now.

Validation.ErrorTemplate size

I've got the following control template which I use as a Validation.ErrorTemplate for TextBoxes:-
<ControlTemplate x:Key="ControlValidationErrorTemplate">
<DockPanel LastChildFill="True">
<Border Background="Red"
DockPanel.Dock="right"
Padding="2,0,2,0"
ToolTip="{Binding ElementName=valAdorner, Path=AdornedElement.(Validation.Errors), Converter={x:Static val:ValidationErrorsConverter.Instance}}">
<TextBlock Text="!"
VerticalAlignment="center"
HorizontalAlignment="center"
FontWeight="Bold"
Foreground="white" />
</Border>
<AdornedElementPlaceholder x:Name="valAdorner"
VerticalAlignment="Center">
<Border BorderBrush="red"
BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
When a TextBox contains invalid content, the above template applies a red border and adds a red box containing an exclamation mark immediately to the right of the TB.
The problem is, the exclamation mark overlaps anything immediately to the right of the TB, rather than the layout changing to accomomodate the exclamation mark. I have a similar problem in DataGrids - the exclamation mark overlaps the right-hand edge of the containing cell, rather than the column width increasing to accommodate it.
Using Snoop, it appears that the template is being displayed in an "adorner layer" which I assume is a separate visual tree? This would explain why the window's layout isn't recalculated to take into account the exclamation mark. Can anyone suggest a way to achieve what I want?
As I suspected, it's due to the error template being rendered on the adorner layer, so it doesn't affect the layout of the window. See: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/9de3c9e5-5759-4f88-9184-175d3eaabdad/
I'm now using this control template instead:-
<ControlTemplate x:Key="ControlValidationErrorTemplate">
<Grid>
<Polygon Points="9,9 9,0 0,0"
Stroke="Red"
StrokeThickness="1"
Fill="Red"
HorizontalAlignment="Right"
VerticalAlignment="Top"
ToolTip="{Binding ElementName=valAdorner, Path=AdornedElement.(Validation.Errors), Converter={x:Static val:ValidationErrorsConverter.Instance}}" />
<AdornedElementPlaceholder x:Name="valAdorner"
VerticalAlignment="Center">
<Border BorderBrush="red"
BorderThickness="1" />
</AdornedElementPlaceholder>
</Grid>
</ControlTemplate>
This draws a red border around the control, with a small red triangle overlapping the top-right corner of the control - hovering over this displays a tooltip containing the error message.

DataContext issues with ListBox after changes to MainWindow.xaml

I am new to WPF and the MVVM design pattern this month, and more than a little out of practice in general. To learn, I've been playing around with textboxes, rectangles, and ways to display them in a window. I began with Ashley Davis' excellent "Simple Drag Selection in WPF" tutorial, which walks through creating a view model for a collection of rectangles, binding a listbox to said collection, and styling the listbox with a canvas, creating a data template for the rectangles, as well as basic "rubber band" selection logic.
I have since built on this tutorial to improve the drag selection so that it behaves much more like selection does in windows explorer, and to allow resizing the rectangles from the corners or edges.
All was well until I changed the MainWindow.xaml in an effort to include a column on the side for various buttons and controls, thus moving the "editor surface" grid from inside a 1x1 grid on the main window to a column of a 1x2 grid, moving the data template to the grid's resources (since it will be the only element in the window that needs it). As soon as I did this, subroutines that I wrote which interact with the listbox started misbehaving--rubber band selection no longer works. There's no visual indication that listbox items are being selected (they were highlighted previously), and interrogating listBox.SelectedItems.Count after a drag-selection mouseUp event returns a zero.
After some experimentation, reading many questions on this site and sections of my WPF Unleashed book, and going over the msdn databinding overview, as of this morning I still cannot find my mistake(s). I believe it is a data binding mistake or incorrect data context.
Some details about the view models involved:
DataFieldViewModel
...implements INotifyPropertyChanged and exposes properties for its (in this case a rectangle and a textbox) X,Y position, width, height, visibility, and selection status (a way to track it across several rubber band selection operations)
PageViewModel
...implements INotifyPropertyChanged, and has among other things an ObservableCollection of type DataFieldViewModel, called DataFields, and exposes it as a ReadOnly Property.
Here's a look at MainWindow.xaml.vb and one of the broken subs:
Namespace EditorUI
'
' The main window of the editor.
'
Partial Public Class MainWindow
Inherits Window
'
' Temporary. Will be replaced with a collection of pages eventually
'
Private Pages As PageViewModel
(remaining data members and properties snipped for brevity)
Public Sub New()
InitializeComponent()
Pages = New PageViewModel
End Sub
(and here's one of the subs with issues)
'
' Select all the data fields that intersect the selection rectangle.
' Remove any selected data fields which do not.
'
Private Sub ApplyDragSelectionRectangle()
If (LeftMouseDrag) Then
Dim selectionRectangle As New Rect(Canvas.GetLeft(selectionRectangleBorder), _
Canvas.GetTop(selectionRectangleBorder), _
selectionRectangleBorder.Width, _
selectionRectangleBorder.Height)
'
' Find and select all the list box items.
'
For Each dataFieldViewModel As DataFieldViewModel In Me.Pages.GetDataFields
Dim hitBox As New Rect(dataFieldViewModel.hbX, _
dataFieldViewModel.hbY, _
dataFieldViewModel.hbWidth, _
dataFieldViewModel.hbHeight)
If (selectionRectangle.IntersectsWith(hitBox)) Then
If (dataFieldViewModel.ExistingSelection) Then
'
' data field is already part of an existing selection; unselect it
'
Me.DataFieldListBox.SelectedItems.Remove(dataFieldViewModel)
Else
Me.DataFieldListBox.SelectedItems.Add(dataFieldViewModel)
End If
End If
If Not (selectionRectangle.IntersectsWith(hitBox)) Then
If (dataFieldViewModel.ExistingSelection) Then
'
' data field was part of an existing selection; reselect it
'
Me.DataFieldListBox.SelectedItems.Add(dataFieldViewModel)
Else
Me.DataFieldListBox.SelectedItems.Remove(dataFieldViewModel)
End If
End If
Next
Else
dragSelectionCanvas.Visibility = Visibility.Collapsed
'
' update all data fields' existing selection status to the new
' selection (first set them all to false to catch data fields
' that were removed)
'
For Each dataFieldViewModel As DataFieldViewModel In Me.DataFieldListBox.Items
dataFieldViewModel.ExistingSelection = False
Next
For Each dataFieldViewModel As DataFieldViewModel In Me.DataFieldListBox.SelectedItems
dataFieldViewModel.ExistingSelection = True
Next
End If
End Sub
Finally, here is the XAML in its entirety:
<Window x:Class="EditorUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Editor_UI_Experiments.EditorUI"
Title="Editor UI Experiments"
Width="900"
Height="600"
Loaded="Window_Loaded"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="778*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
VerticalAlignment="Top"
Height="25"
Content="Explode :D"
Name="Button1"
/>
<Grid
Name="EditorSurface"
Grid.Column="1"
MouseDown="Editor_MouseDown"
MouseUp="Editor_MouseUp"
MouseMove="Editor_MouseMove"
>
<Grid.Background>
<ImageBrush ImageSource="{Binding GetPageImage}" />
</Grid.Background>
<Grid.DataContext>
<local:PageViewModel/>
</Grid.DataContext>
<Grid.Resources>
<!--
A data template that defines the visuals for a data field.
-->
<DataTemplate
DataType="{x:Type local:DataFieldViewModel}"
>
<!--
The data field is embedded in a Grid so that we can set the Margin
The margin is set so that the ListBox item selection fits nicely around the Rectangle.
-->
<Grid
Margin="0,2,2,2"
>
<!--
text box where the data field's response lives (it could be a Database tag,
or a check mark, or custom response)
-->
<TextBox
Width="{Binding Width}"
Height="{Binding Height}"
Background="LightBlue"
Cursor="IBeam"
MouseDown="TextBox_MouseDown"
MouseUp="TextBox_MouseUp"
MouseMove="TextBox_MouseMove"
Text="Example Text"
/>
<!--
rectangle that lives on top of the text field to aid in positioning the data field
-->
<Rectangle
Width="{Binding Width}"
Height="{Binding Height}"
Stroke="LightBlue"
StrokeThickness="5"
Fill="White"
Opacity="0.5"
Cursor="SizeAll"
MouseDown="Rectangle_MouseDown"
MouseUp="Rectangle_MouseUp"
MouseMove="Rectangle_MouseMove"
Visibility="{Binding Visibility}"
/>
<!--
Thumb "handles" to give the user a way to resize the data field
-->
<!--
These four live in the corners of a data field and allow resizing on
X and Y simultaneously
-->
<Rectangle
Width="7"
Height="7"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="-1,-1,0,0"
Cursor="SizeNWSE"
Fill="LightGray"
Stroke="Gray"
Opacity="0.6"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
<Rectangle
Width="7"
Height="7"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="0,-1,-1,0"
Cursor="SizeNESW"
Fill="LightGray"
Stroke="Gray"
Opacity="0.6"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
<Rectangle
Width="7"
Height="7"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
Margin="-1,0,0,-1"
Cursor="SizeNESW"
Fill="LightGray"
Stroke="Gray"
Opacity="0.6"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
<Rectangle
Width="7"
Height="7"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Margin="0,0,-1,-1"
Cursor="SizeNWSE"
Fill="LightGray"
Stroke="Gray"
Opacity="0.6"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
<!--
These four live along the data field's edges and allow resizing in the X
or Y direction only. They have zero opacity to avoid visual clutter
-->
<Rectangle
Height="5"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Margin="7,0,7,0"
Cursor="SizeNS"
Fill="Yellow"
Opacity="0"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
<Rectangle
Height="5"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="7,0,7,0"
Cursor="SizeNS"
Fill="Yellow"
Opacity="0"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
<Rectangle
Width="5"
VerticalAlignment="Stretch"
HorizontalAlignment="Left"
Margin="0,7,0,7"
Cursor="SizeWE"
Fill="Yellow"
Opacity="0"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
<Rectangle
Width="5"
VerticalAlignment="Stretch"
HorizontalAlignment="Right"
Margin="0,7,0,7"
Cursor="SizeWE"
Fill="Yellow"
Opacity="0"
Visibility="{Binding Visibility}"
MouseDown="Thumb_MouseDown"
MouseUp="Thumb_MouseUp"
MouseMove="Thumb_MouseMove"
/>
</Grid>
</DataTemplate>
</Grid.Resources>
<!--
This ListBox presents the data fields
The data template that defines the visuals for each data field is in the
resources section at the start of this file.
-->
<ListBox
x:Name="DataFieldListBox"
ItemsSource="{Binding GetDataFields}"
SelectionMode="Extended"
Background="Transparent"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style
TargetType="ListBoxItem"
>
<Setter
Property="Canvas.Left"
Value="{Binding X}"
/>
<Setter
Property="Canvas.Top"
Value="{Binding Y}"
/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<!--
Render a drag selection rectangle using a Canvas with a border
-->
<Canvas
x:Name="dragSelectionCanvas"
Visibility="Collapsed"
>
<Border
x:Name="selectionRectangleBorder"
BorderBrush="Blue"
BorderThickness="1"
Background="LightBlue"
CornerRadius="1"
Opacity="0.5"
/>
</Canvas>
</Grid>
</Grid>
I'm sure my code is riddled with novice mistakes, but it's been fun so far. Hope to improve quickly and maybe turn this into something useful. Feedback and insight are most welcome. If someone happens to find where I'm going wrong, you'll have my gratitude.
-Tom
I suspect it has something to do with the fact you are defining the Grid's DataContext in the XAML, but your drag event is referencing an object in the code-behind. So your ListBox is binding to the XAML copy of PageViewModel, while your code-behind is working with a different copy of PageViewModel
I'd suggest removing the DataContext property from the XAML and instead setting it in the code-behind, such as Me.DataContext = Pages
Just keep in mind that its usually bad practice to be setting the DataContext in code-behind unless it's the application startup code.

Wpf - Drop shadow disappears

I created a window with no style and added a custom border. I need my window to drop a shadow.
<Border BorderBrush="#000000 "
BorderThickness="1,0,1,1" Width="400"
Height="400"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
CornerRadius="10, 10, 0, 0"
Background="Black">
<Border.Effect>
<DropShadowEffect Color="Black" Direction="320"
ShadowDepth="5" Opacity="1" BlurRadius="5" />
</Border.Effect></Border>
But my shadow disappears when I set the width and height like this :
Width="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type Window}}, Path=Width}"
Help me find a solution please. Thanks
Since we don't have the full scope of your solution, I must assume that the Border is within a ControlTemplate that is assigned to the Style of the Window. Remember that if you are going to apply a DropShadowEffect to the root window you need to pad it otherwise you won't see it. Apply Padding="10" to Border and you should see it.
Try To add on the X & Y Thickness of the Shadow to your Windows dimensions
Don't apply effects on the root visuals! In this case, they apply to all children down visual tree and will be cause of reducing performance.
Use the next pattern:
<Grid x:Name="RootWindowGrid">
<Border x:Name="BorderWithEffect" Margin="5">
<Border.Effect>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="5" Opacity="1" BlurRadius="5" />
</Border.Effect>
</Border>
<Border x:Name="RootBorder_ForAll_Another_Window_Visuals" Margin="5"/>
</Grid>
Margin depends on effect intensivity.

Resources