In case we use WPF (Silverlight) Viewbox with Stretch="UniformToFill" or Stretch="Uniform" when it preserves content's native aspect ratio, how could we get knowing the current coefficient of scaling which were applied to the content?
Note: we not always know the exact initial dimensions of the content (for example it's a Grid with lots of stuff in it).
See this question: Get the size (after it has been "streched") of an item in a ViewBox
Basically, if you have a Viewbox called viewbox, you can get the ScaleTransform like this
ContainerVisual child = VisualTreeHelper.GetChild(viewbox, 0) as ContainerVisual;
ScaleTransform scale = child.Transform as ScaleTransform;
You could also make an extension method for Viewbox which you can call like this
viewbox.GetScaleFactor();
ViewBoxExtensions
public static class ViewBoxExtensions
{
public static double GetScaleFactor(this Viewbox viewbox)
{
if (viewbox.Child == null ||
(viewbox.Child is FrameworkElement) == false)
{
return double.NaN;
}
FrameworkElement child = viewbox.Child as FrameworkElement;
return viewbox.ActualWidth / child.ActualWidth;
}
}
Related
So the requirement is simple, but the solution doesn't seem to be (or at least I haven't succeeded yet). I need to display a vertical bar at the left side of the currently selected item of the TreeView control. Something like this:
Problem I'm facing is that with child items, this indicator also moves towards right, as it is part of the ItemTemplate, like this:
This is undesirable. I need the red indicator to stick to the left edge of the control, like this:
I can see why this happens. The ItemsPresenter in TreeViewItem template introduces a left margin of 16 units, which causes the all child items to move right-wards as well. I can't figure out how to avoid it.
Note: The red bar is a Border with StrokeThickness set to 4,0,0,0. It encompasses the Image and TextBlock elements inside it, though this doesn't directly have anything to do with the problem.
As you are aware, since the left vacant space is outside of ItemsPresenter which hosts the content of TreeViewItem, you cannot accomplish it by ordinary Style.
Instead, a workaround would be to change the bar to an element such as Rentangle and move it to the edge of TreeView. For example, it can be done by an attached property which is to be attached to the element and move it to the edge of TreeView with a specified left margin.
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
public static class TreeViewHelper
{
public static double? GetLeftMargin(DependencyObject obj)
{
return (double?)obj.GetValue(LeftMarginProperty);
}
public static void SetLeftMargin(DependencyObject obj, double value)
{
obj.SetValue(LeftMarginProperty, value);
}
public static readonly DependencyProperty LeftMarginProperty =
DependencyProperty.RegisterAttached("LeftMargin", typeof(double?), typeof(TreeViewHelper), new PropertyMetadata(null, OnValueChanged));
private static void OnValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if ((d is FrameworkElement element) && (e.NewValue is double leftMargin))
{
element.Loaded += (_, _) =>
{
TreeView? tv = GetTreeView(element);
if (tv is null)
return;
Point relativePosition = element.TransformToAncestor(tv).Transform(new Point(0, 0));
element.RenderTransform = new TranslateTransform(leftMargin - relativePosition.X, 0);
};
}
}
private static TreeView? GetTreeView(FrameworkElement element)
{
DependencyObject test = element;
while (test is not null)
{
test = VisualTreeHelper.GetParent(test);
if (test is TreeView tv)
return tv;
}
return null;
}
}
Edit:
This workaround does not depend on how to show/hide the bar upon selection of the ListViewItem. Although the question does not provide the actual code for this, if you implement a mechanism to change BorderBrush upon selelection, you can modify it to change Fill of the bar (in the case of Rectangle).
I have a barebones WPF app that has about a Meg of ASCII text to display. I initially put a TextBlock in a WrapPanel in a ScrollViewer. This correctly scrolled and resized when I resized the window, but it was super slow! I needed something faster.
So I put the text in FormattedText, and rendered that using a custom control. That was much faster, but it didn't resize. So I made my custom control resize. But it would ReDraw too many times a second, so I made it only redraw every 100ms.
Much better. Rendering and Resizing still isn't great but it's much better than it was. But I lost scrolling.
Eventually I need a solution that does a lot - but for now I'm trying to have a solution that does a little: show a mem of text, wrap, have a scrollbar, and be performant. Eventually, I'd like it to scale to a gig of text, have colors inline, some mouseover/click events for portions of the text...
How can I make FormattedText (or perhaps more accurately, a DrawingVisual) have a Vertical Scrollbar?
Here's my FrameworkElement that shows my FormattedText:
using System;
using System.Windows;
using System.Windows.Media;
namespace Recall
{
public class LightweightTextBox : FrameworkElement
{
private VisualCollection _children;
private FormattedText _formattedText;
private System.Threading.Timer _resizeTimer;
private const int _resizeDelay = 100;
public double MaxTextWidth
{
get { return this._formattedText.MaxTextWidth; }
set { this._formattedText.MaxTextWidth = value; }
}
public LightweightTextBox(FormattedText formattedText)
{
this._children = new VisualCollection(this);
this._formattedText = formattedText;
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
drawingContext.DrawText(this._formattedText, new Point(0, 0));
drawingContext.Close();
_children.Add(drawingVisual);
this.SizeChanged += new SizeChangedEventHandler(LightweightTextBox_SizeChanged);
}
void LightweightTextBox_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.MaxTextWidth = e.NewSize.Width;
if (_resizeTimer != null)
_resizeTimer.Change(_resizeDelay, System.Threading.Timeout.Infinite);
else
_resizeTimer = new System.Threading.Timer(new System.Threading.TimerCallback(delegate(object state)
{
ReDraw();
if (_resizeTimer == null) return;
_resizeTimer.Dispose();
_resizeTimer = null;
}), null, _resizeDelay, System.Threading.Timeout.Infinite);
}
public void ReDraw()
{
this.Dispatcher.Invoke((Action)(() =>
{
var dv = _children[0] as DrawingVisual;
DrawingContext drawingContext = dv.RenderOpen();
drawingContext.DrawText(this._formattedText, new Point(0, 0));
drawingContext.Close();
}));
}
//===========================================================
//Overrides
protected override int VisualChildrenCount { get { return _children.Count; } }
protected override Visual GetVisualChild(int index)
{
if (index < 0 || index >= _children.Count)
throw new ArgumentOutOfRangeException();
return _children[index];
}
}
}
For simple text a readonly TextBox is pretty good. For more complex matters you can use FlowDocuments (which can be hosted in a FlowDocumentScrollViewer), TextBlocks also host flow content but are not intended for larger amounts.
MSDN:
TextBlock is not optimized for scenarios that need to display more than a few lines of content; for such scenarios, a FlowDocument coupled with an appropriate viewing control is a better choice than TextBlock, in terms of performance. After TextBlock, FlowDocumentScrollViewer is the next lightest-weight control for displaying flow content, and simply provides a scrolling content area with minimal UI. FlowDocumentPageViewer is optimized around "page-at-a-time" viewing mode for flow content. Finally, FlowDocumentReader supports the richest set functionality for viewing flow content, but is correspondingly heavier-weight.
I am using WPF datagrid from codeplex. I am using DatagridTemplateColumn and I have written datatemplates to display contents in each column.
Now I have to display some help message to a user when the any control in datagrid is focussed.
For this I thought of using adorner layer. I used ComboBox loaded event and accessed the adrorner layer of it. I then added my own adorner layer with some thing to be displayed there similar to tooltip. Below is the code.
TextBox txtBox = (TextBox)comboBox.Template.FindName("PART_EditableTextBox", comboBox);
if (txtBox == null)
return;
txtBox.ToolTip = comboBox.ToolTip;
AdornerLayer myAdornerLayer = AdornerLayer.GetAdornerLayer(txtBox);
Binding bind = new Binding("IsKeyboardFocused");
bind.Converter = new KeyToVisibilityConverter();
bind.Source = txtBox;
bind.Mode = BindingMode.OneWay;
PEAdornerControl adorner = new PEAdornerControl(txtBox);
adorner.SetBinding(PEAdornerControl.VisibilityProperty, bind);
PEAdorner layer is this ::
public class PEAdornerControl : Adorner
{
Rect rect;
// base class constructor.
public PEAdornerControl(UIElement adornedElement)
: base(adornedElement)
{ }
protected override void OnRender(DrawingContext drawingContext)
{
.....
}
}
Now the problem is as follows. I am attaching screenshot of how it is looking in datagrid. If the datagrid has more than 4 rows, things are fine.Below is the screenshot
If the datagrid has less number of row, this adorner goes inside datagrid and is not visible to user. The screenshot is below
How do I get this adorner layer above the DataGrid? Please help me !!!
I looked at your question again and i think this is what you would need.
TextBox txtBox = (TextBox)comboBox.Template.FindName("PART_EditableTextBox", comboBox);
if (txtBox == null)
return;
txtBox.ToolTip = comboBox.ToolTip;
//this is locating the DataGrid that contains the textbox
DataGrid parent = FindParent<DataGrid>(this);
//Get the adorner for the parent
AdornerLayer myAdornerLayer = AdornerLayer.GetAdornerLayer(parent);
Binding bind = new Binding("IsKeyboardFocused");
bind.Converter = new KeyToVisibilityConverter();
bind.Source = txtBox;
bind.Mode = BindingMode.OneWay;
PEAdornerControl adorner = new PEAdornerControl(txtBox);
adorner.SetBinding(PEAdornerControl.VisibilityProperty, bind);
The find parent method is this:
public T FindParent<T>(DependencyObject obj) where T : DepedencyObject
{
if (obj == null)
return null;
DependencyOBject parent = VisualTreeHelper.GetParent(obj);
if (parent is T)
return parent as T;
else
return FindParent<T>(parent);
}
You may need to set the position of your adorner in the OnRender method but this should work. One thing to consider though is that if your DataGrid is within another container (such as a panel, grid, etc) then you may still run into your clipping problem.
The clipping problem is due to the fact that when a container checks the layout of its children it does not normally take into account their adorners. To combat this you would possibly need to create your own control and override the MeasuerOverride(Size constraint) method.
Example:
public class MyPanel : Panel
{
protected override Size MeasureOverride(Size constraint)
{
Size toReturn = new Size();
foreach (UIElement child in this.InternalChildren)
{
//Do normal Measuring of children
foreach( UIElement achild in AdornerLayer.GetAdorners(child))
//Measure child adorners and add to return size as needed
}
return toReturn;
}
}
That code is really rough for measure but should point you in the right direction. Look at the documentation page http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.measureoverride.aspx for information about measuring child elements in a panel.
Just get the topmost AdornerLayer, instead
static AdornerLayer GetAdornerLayer(FrameworkElement adornedElement)
{
var w = Window.GetWindow(adornedElement);
var vis = w.Content as Visual;
return AdornerLayer.GetAdornerLayer(vis);
}
Also, if you have the name of your DataGrid you can get the nearest layer above it:
AdornerLayer myAdornerLayer = AdornerLayer.GetAdornerLayer(myDataGrid);
I have a custom DrawingCanvas which is inherited from Canvas. When I add a ContentControl to DrawingCanvas with the following code nothing shows up.
GraphicsRectangle rect = new GraphicsRectangle(0, 0, 200, 200, 5, Colors.Blue);
DrawingContainer host = new DrawingContainer(rect);
ContentControl control = new ContentControl();
control.Width = 200;
control.Height = 200;
DrawingCanvas.SetLeft(control, 100);
DrawingCanvas.SetTop(control, 100);
control.Style = Application.Current.Resources["DesignerItemStyle"] as Style;
control.Content = host;
drawingCanvas.Children.Add(control);
GraphicsRectangle is a DrawingVisual and the constructor above draws a Rect with (0,0) top left point and length of 200 to the drawingContext of GraphicsRectangle. DrawingContainer is a FrameworkElement and it has one child, which is rect above, given with constructor. DrawingContainer implements GetVisualChild and VisualChildrenCount override methods. At last, Content property of ContentControl is set to the DrawingContainer to be able to show the DrawingVisual's content.
When I add the created ContentControl to a regular Canvas, control is showed correctly. I guess the reason is that DrawingCanvas doesn't implement ArrangeOverride method. It only implements MeasureOverride method. Also DrawingContainer doesn't implement Measure and
Arrange override methods. Any ideas?
As I thought the problem was missing ArrangeOverride method in DrawingCanvas. With the following ArrangeOverride method added to DrawingCanvas, ContentControls are showed correctly.
protected override Size ArrangeOverride(Size arrangeSize)
{
foreach (Visual child1 in children)
{
if (child1 is DrawingVisual)
continue;
ContentControl child = child1 as ContentControl;
GraphicsBase content = ((DrawingContainer)(child.Content)).GraphicsObject;
child.Arrange(new Rect(DrawingCanvas.GetLeft(child), DrawingCanvas.GetTop(child), content.Width, content.Height));
}
return arrangeSize;
}
where GraphicsBase is the base of the GraphicsRectangle class. In order to find the size of the GraphicsBase, I added width and height properties to GraphicsBase which are set in the constructor of GraphicsRectangle.
I'm coding a custom panel representing the hand of cards. It's a panel that will stack the cards horizontally. If there isn't enough space, each card will overlap part of the card left of it. Minimum part should be always visible. I accomplished this and this is the code:
using System;
using System.Windows;
using System.Windows.Controls;
namespace Hand
{
public class Hand : Panel
{
//TODO Should be dependancy property
private const double MIN_PART = 0.5;
protected override Size MeasureOverride(Size availableSize)
{
Size desiredSize = new Size();
foreach (UIElement element in this.Children)
{
element.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));
desiredSize.Width += element.DesiredSize.Width;
desiredSize.Height = Math.Max(desiredSize.Height, element.DesiredSize.Height);
}
return desiredSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
//percentage of the visible part of the child.
double part = 1;
Double desiredWidth = 0;
//TODO Check how to get desired size because without looping
//this.DesiredSize is minimum of available size and size returned from MeasureOverride
foreach (UIElement element in this.Children)
{
desiredWidth += element.DesiredSize.Width;
}
if (desiredWidth > this.DesiredSize.Width)
{
//Every, but the last child should be overlapped
double lastChildWidth = this.Children[this.Children.Count - 1].DesiredSize.Width;
part = (this.DesiredSize.Width - lastChildWidth) / (desiredWidth - lastChildWidth);
part = Math.Max(part, MIN_PART);
}
double x = 0;
foreach (UIElement element in this.Children)
{
Rect rect = new Rect(x, 0, element.DesiredSize.Width, element.DesiredSize.Height);
element.Arrange(rect);
finalSize.Width = x + element.DesiredSize.Width;
x += element.DesiredSize.Width * part;
}
return finalSize;
}
}
}
I would like to add scrollbar when minimum part is reached, so that the user could still be able to view all the cards. I cannot accomplish this. I tried with the ScrollViewer like this:
<Window x:Class="TestScrollPanel.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:h="clr-namespace:Hand;assembly=Hand"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<h:Hand>
<Button Width="100">One</Button>
<Button Width="150">Two</Button>
<Button Width="200">Three</Button>
</h:Hand>
</ScrollViewer>
</Grid>
</Window>
But this doesn't work because once horizontal scrollbar is visible, MeasureOveride and ArrangeOverride of Hand panel is never called and even if it would be called, Hand would get desired size to arrange all children without overlapping.
Could this be made with ScrollViewer at all and if not, another ideas would be appreciated.
Thank you all for ypur help.
Jurica
Firstly, change your panel's logic to just the opposite: let MeasureOverride pack the cards as tightly as possible, and then let ArrangeOverride spread them evenly over whatever width is given.
Secondly, use the MinWidth property. Bind it to ScrollViewer.ActualWidth.
This way, if the cards can be tightly packed into width less than that of the ScrollViewer, then your Hand will be stretched to all available space. And if they can't, then the Hand's width will be just whatever you calculate it to.