Draw something in OnRender and using Background - wpf

I'd like to spruce up the WPF TreeView and add some functionality to it that needs to draw lines between the items of the TreeView. For that I created my own control inheriting from TreeView and drawing the lines in the OnRender override of that control:
Public Class MyTreeView
Inherits TreeView
Protected Overrides Sub OnRender(drawingContext As DrawingContext)
MyBase.OnRender(drawingContext)
drawingContext.DrawLine(New Pen(Brushes.Black, 1), New Point(0, 0), New Point(Me.ActualWidth, Me.ActualHeight))
End Sub
End Class
But I can only see my drawings in the running program, when I set the Background of my TreeView to Transparent.
<local:MyTreeView Background="Transparent" />
As soon as I put a white or gradient background to my TreeView it hides my drawings.
Is it possible to add some drawings in the OnRender override, that is rendered on top of the given Background?
For reasons that belong to another question I can't work with a transparent background and I can't work with a Border with background under a transparent TreeView simulating the background in the TreeView.

Related

WPF: how to auto scroll to my first ListViewItem when form load

So i am build simple Clipboard manager.
Every ListViewItem come from Clipboard.GetText and my application minimize to Tray and when double click on its Icon the application jump and i want to focus become on the first ListViewItem in order to be able to navigate with Up & Down arrows.
This is my ListView:
ListView myListView;
Model List:
public ObservableCollection<string> Clipboards
Window Loaded event:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
if (viewModel.Clipboards.Count != 0)
myListView.ScrollIntoView(myListView.Items[0]);
myListView.Focus();
}
So currently when i open int the first time the application, the Focus is not on any ListViewItem and in the next time the focus is on the last selected/click ListViewItem and not on the first one.
It looks like you have your ViewModel in the code behind. This is not good MVVM standard.
Maybe this could be helpful
How can I set the focus to a ListBox properly on load if it uses databinding?
From what I see you are not focusing any ListViewItem but the ListView itself. I think this is your mistake. To focus the item you have to get it's container. The objects in the ItemsSource are actually the data itself and no the UIElement to render. To draw this data or add it to the visual tree for rendering, the ItemsControl will generate a container for the data e.g. a ListViewItem. Only the UIElement can receive focus, that's why the UIElement exposes the Focus() method. You have to use the ItemContainerGenarator to retrieve this container for your data:
ListView myListView;
(myListView.ItemsPanel as VirtualizingPanel)?.BringIndexIntoViewPublic(0);
myListView.Dispatcher.Invoke(new Action(
() =>
{
ListBoxItem dataContainer = myListView.ItemContainerGenerator.ContainerFromIndex(0) as ListBoxItem;
dataContainer?.Focus();
}), DispatcherPriority.ContextIdle);
This example will move the focus to the first element in the ListView.

How to get a one-to-one match of an Adorner with its adorned element within a ScrollViewer?

wpf
I have a control A, (an inkcanvas), within a Grid within a ScrollViewer. Conrol A is taller then the physical window, so the ScrollViewer correctly adds a vertical scroll bar and the entire control can be viewed by scrolling down. When attaching an Adorner with a control B, (another inkcanvas), to control A, scrolling downward shows the Adorner to be cut off at the bottom of the screen. That is, the Adorner is not completely covering the adorned element and/or is not extended downward when scrolling.
How do I get the Adorner (the control) to completely cover the adorned element and respect the ScrollViewer. (I need a one-to-one match between the pixels of the Adorner control and the adorned element within the ScrollViewer).
TIA
Edit#1: The key line in the Adorner that sets the background of the InkCanvas is
_inkcanvas.Background = CreateGrid();
public InkCanvasTextAdorner(InkCanvas element)
: base(element)
{
_element = element;
_visuals = new VisualCollection(this);
_inkcanvas = new InkCanvas();
_inkcanvas.Background = CreateGrid();
_visuals.Add(_inkcanvas);
AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(element);
adornerLayer.Add(this);
}
If an InkCanvas is used (as the above) the Adorner's background is clipped at the bottom. The adorner control, however, does continue to the bottom of the adorned element.
However, if a Canvas is used instead of the InkCanvas, the Adorner's background does extend to the bottom of the adorned element.
What's wrong?
I'm guessing that the difference in the Background property expanding past the physical screen with the Canvas and not the InkCanvas may be because the Canvas inherits from Panel whereas the InkCanvas does not. Based on the finding that the Canvas background does do what I need, I find the below code does accomplish what I want--the canvas allows images from layers beneath it to be seen yet posts a grid of lines overwhich the InkCanvas will accept strokes. All is well :)
public InkCanvasTextAdorner(InkCanvas element)
: base(element)
{
_element = element;
// The VisualCollection has only one visual parent. I.e. InkCanvasTextAdorner is the parent to the VisualCollection.
// By overriding default rendering behavior of the VisualCollection, any kind of control and its children can be placed in the Adorner.
_visuals = new VisualCollection(this);
_inkcanvas = new InkCanvas();
_inkcanvas.Background = Brushes.Transparent;
_canvas = new Canvas();
_canvas.Background = CreateGrid();
_grid = new Grid();
_grid.Children.Add(_canvas);
_grid.Children.Add(_inkcanvas);
// The _grid is a logical child of the VisualCollection of the Adorner. The ArrangeOverride and MeasureOverride will set up the Grid control.
_visuals.Add(_grid); // Adding a single control for display.
// AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(element);
AdornerLayer adornerLayer = AdornerLayer.GetAdornerLayer(element);
adornerLayer.Add(this);
}
Which looks like:

How do I make user controls for both ListView and ListViewItem work with each other?

I have all the styling, triggers, etc. down for ListView and ListViewItem, and I want to turn them into user controls. How do I make sure that these two "match up" with each other, so that MyListView accepts MyListViewItems as content? Also, considering that I must end the ListView tag by the end of the user control XAML file, I am not sure how I would add items to it.
If you want them to be reusable with different data sets, especially through binding, you should stay away from UserControls and just make custom controls derived from the original types. In that case you create a standalone MyListView.cs and MyListViewItem.cs and all of the XAML for the controls goes into default Styles (usually also containing a ControlTemplate) in Themes/Generic.xaml. You can see an example of this setup by just adding a WPF Custom Control to your WPF project from Add New Item.
Once you've created the .cs files for your custom controls you just need to override a few methods from the base ItemsControl to use MyListViewItem as the item container control. The ListView would end up like this:
public class MyListView : ListView
{
static MyListView()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyListView), new FrameworkPropertyMetadata(typeof(MyListView)));
}
protected override DependencyObject GetContainerForItemOverride()
{
return new MyListViewItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is MyListViewItem;
}
}
You can now use your custom MyListView exactly as you would a normal ListView, including binding to ItemsSource.
Inheritance should take care of that for you. In other words, if you have two user controls, the first one with a basic element of ListView (not UserControl) and the other of ListViewItem (again, not UserControl), and you make sure they extend ListView and ListViewItem respectively in the .cs code, the following should work equally:
ListView lv = new ListView();
lv.Items.Add(new ListViewItem());
or
MyListView mlv = new MyListView();
mlv.Items.Add(new myListViewItem()); //If your myListView extends ListView, and myListViewItem extends ListViewItem in your user control files, of course
In case you are looking for a XAML solution, you should import your namespace at the top
xmlns:myControls="WhateverYourNamespaceAndAssemblyAre"
and on you page/window/whatever
<myControls:myListView>
<myControls:myListViewItem/>
<myControls:myListViewItem/>
</myControls:myListView>

Wpf Adorner not responding to interactions

I'm trying to create an overlay in wpf (with darkening background), similar to the ones you can find on the web to popup images.
I would like it to be reusable in more than 1 part of the application, with diffent types of content.
this is the temporary code of the constructor of the adorner class (just to try)
private readonly Grid _grid = new Grid();
public DarkOverlayAdorner(UIElement adornedElement, Object content) :
base(adornedElement)
{
_grid.Background = new SolidColorBrush(Color.FromArgb(99, 0, 0, 0));
IsHitTestVisible = true;
var visual = content as UIElement;
if (visual != null)
_grid.Children.Add(visual);
}
In addition in the class (of course), I have the ovverrides of MeasureOverride and ArrangeOverride to give the adorner the correct size of the adorned element, GetVisualChild, and VisualChildCount...
The problem here is that the adorner is correctly shown, but no events or behaviour are applied on the adorned element. For example:
AdornerLayer layer = AdornerLayer.GetAdornerLayer(textBoxProva);
layer.Add(new DarkOverlayAdorner(textBoxProva, new Button{Content = "prova"}));
The button here is shown, but I can-t click the button and no effects on button mouseover are applied.
I still can't figure out the problem.
Ok, I've lost a lot of time trying to figure out what was the problem.
In the end I found the solution:
If you want the element added to react to events, I think that the element must be bound to the visual tree of the adorner.
The way to do it is to use a VisualCollection, intitialized to the adorner itself:
VisualCollection visualChildren;
FrameworkElement #object;
public DarkOverlayAdorner(UIElement adornedElement) :
base(adornedElement)
{
visualChildren = new VisualCollection(this);
#object = new Button {Content = "prova"};
visualChildren.Add(#object);
}
protected override Visual GetVisualChild(int index)
{
return visualChildren[index];
}
This way the events are correctly routed.
You might want to take a look at the ChildWindow control in the Extended WPF Toolkit. It is a control that pops up a Window with a modal background effect, and you can specify the content to put inside the Window.

HwndSource does not display the Adorner layer

When I host WPF controls that use adorners (the error border of the textbox) in a HwndSource the adorners are not shown. It seems that the adorner layer is not there. Why is that so and what can I do against it? Is this a known bug?
The AdornerLayer is usually part of the default template of the Window class.
If you are customizing the Window template or host controls in something else than a Window; you'll have to create the AdornerLayer yourself.
This can be done by wrapping your WPF controls inside a System.Windows.Documents.AdornerDecorator:
hwndSource.RootVisual = new AdornerDecorator { Child = yourTextBox };

Resources