I have a user control in which I have a popup that occasionally hides the rest of the control. Something like this:
<Grid>
<Grid Name="myGrid">
<!-- Some stuff -->
</Grid>
<Popup Width="{Binding ElementName=myGrid, Path=ActualWidth}"
PlacementTarget="{Binding ElementName=myGrid}"
Placement="Relative">
<Border Name="popupBorder">
<Grid>
<!--- Slightly different stuff --->
<Grid>
</Border>
</Popup>
</Grid>
...and that works nicely except of course I need to set a background. I would like the popup-hides-everything transition to be as seamless as possible so it'd be nice if my popup and the rest of my control shared the same background.
I have been unable to figure out how to do this when the usercontrol doesn't have a background explicitly set.
I have tried this (in XAML):
<Border Name="popupBorder" Background="{Binding ElementName=myGrid, Path=Background}" />
I have tried this (in code):
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var brush = this.GetValue(UserControl.BackgroundProperty);
popupBorder.Background = (Brush)brush;
}
In all cases the border's background is 'null' and the popup is just a big black block. Is there a way to do this?
(In case you want to tell me that there's just a better way to do what I'm trying to do ... I have a long list; I want to display the first few items with a "See more" button; the whole mess is in an ItemsControl and I don't want the "See more" button to resize the items - hence, show the long list on a popup.)
After getting some advice from dkozl I was able to implement the following solution:
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
puBorder.Background = findBackground(this) ?? SystemColors.ControlBrush;
}
private Brush findBackground(DependencyObject element)
{
var parent = element;
while (parent != null)
{
var p = parent as Control;
if (p != null && p.Background != null)
return p.Background;
parent = VisualTreeHelper.GetParent(parent);
}
return null;
}
I tried to do the same thing in a converter but the converter executes before the control is added to the visual tree (I assume, anyway - it didn't have a visual parent) and so it wasn't useful.
Related
I am very new to WPF and just would to ask your help for a very basic method of getting the Windows controls and their children as in Winform app. Bottom line is to have reusable code for multiple window/pages in a different different class.
Bunches of thanks before.
Public Sub GetControl(Wn As Window)
For Each Ctrl As Control In Wn.Controls
'Code here
If Ctrl.HasChildren = True Then
'Code here
End If
Next
End Sub
So here's the down low. You need to look for UIElement, which is a base class for all UIElements in XAML. There are two main types that host controls. ContentControl and Panel.
A ContentControl has a 'Content' property that is potentially containing an object.
A Panel has a collection of UIElements property 'Children' and of type UIElement.
If you're looking just for the elements of a Window or ANY UIElement then you need to recursively search and make that list based on that information.
A Window inherits from ContentControl but that Content might be a Grid or StackPanel or any Panel or sorts and may have Children of UIElement also.
You cycle through them all until you get the results.
public MainWindow()
{
InitializeComponent();
foreach (var element in GetAllElementsFrom(this))
Debug.WriteLine(element.ToString());
}
private IEnumerable<UIElement> GetAllElementsFrom(UIElement element)
{
var uiElements = GetSingleElement();
switch (element)
{
case Panel panel:
foreach (var child in panel.Children)
uiElements = uiElements.Concat(GetInnerElements(child));
break;
case UserControl userControl:
uiElements = uiElements.Concat(GetInnerElements(userControl.Content));
break;
case ContentControl contentControl:
if (contentControl.Content is UIElement uiElement)
uiElements = uiElements.Concat(GetInnerElements(uiElement));
break;
}
return uiElements;
IEnumerable<UIElement> GetSingleElement()
{
yield return element;
}
}
Here's the XAML I used.
<Grid>
<Button>
<DockPanel>
<ContentControl>
<Grid>
<TextBox />
</Grid>
</ContentControl>
</DockPanel>
</Button>
<StackPanel>
<Label />
<TextBlock>
Hey There!!
</TextBlock>
<Grid>
<Ellipse />
</Grid>
</StackPanel>
</Grid>
And here's the result I got in my debug window:
System.Windows.Controls.Grid
System.Windows.Controls.Button
System.Windows.Controls.DockPanel
System.Windows.Controls.ContentControl
System.Windows.Controls.Grid
System.Windows.Controls.TextBox
System.Windows.Controls.StackPanel
System.Windows.Controls.Label
System.Windows.Controls.TextBlock
System.Windows.Controls.Grid
System.Windows.Shapes.Ellipse
Happy Coding! Note: Uses C# 7 syntax; if you're not on C# 7 then just make the changes, I think they're straight forward.
I want to achieve a very well known behavior seen in the browser when you have an image to display that is larger then the monitor:
Originally, the image is displayed fitting inside the window area, and the mouse cursor is a magnifying glass with a "+" icon;
If you click, two things happen:
a. The image is displayed with its native pixel size;
b. Scroll bars appear;
I want this effect with a larger-than-screen UniformGrid. For that, I can use ViewBox. I have already got what I want putting the control inside a ViewBox with Stretch.Uniform property, and upon MouseLeftButtonDown event it toggles between Stretch.None and Stretch.Uniform, just like the large image in browser analogy, only without scroll bars.
Now if I add the ScrollViewer (ViewBox -> ScrollViewer -> UniformGrid), the effect doesn't work anymore, because the ScrollViewer always displays the (larger than window) MyUserControl with its native resolution, that is, clipped and with scroll bars activated, while I would like to alternate between this and a "fitting in ViewBox" version.
Here is how I get the resizing, but the ScrollViewer never displays:
<Viewbox x:Name="vbox" Stretch="None">
<ScrollViewer x:Name="scroll" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<UniformGrid x:Name="ugrid" Columns="2" MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
<local:AtlasMasculinoAnterior/>
<local:AtlasMasculinoPosterior/>
</UniformGrid>
</ScrollViewer>
</Viewbox>
And if change the order, then the Scroll bars always display and the zoom doesn't toggle upon mouse click (although the event fires):
<ScrollViewer x:Name="scroll" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<Viewbox x:Name="vbox" Stretch="None">
<UniformGrid x:Name="ugrid" Columns="2" MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
<local:AtlasMasculinoAnterior/>
<local:AtlasMasculinoPosterior/>
</UniformGrid>
</Viewbox>
</ScrollViewer>
And here the code behind event:
private void UniformGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (vbox.Stretch == Stretch.None)
{
vbox.Stretch = Stretch.Uniform;
}
else
vbox.Stretch = Stretch.None;
}
So what am I doing wrong, or what should I do so that the intended behavior works?
The way I see it, I would like to alternate between having the control in a ViewBox (Stretch.Uniform) and having the control inside a ScrollViewer, but I wonder how to have the same effect with both elements being part of the layout tree (one inside another), or even if I should, move the UniformGrid in and out of containers I would manipulate programmatically in code behind.
Got it to work in sort of a hackish way, by having a Grid with both a ViewBox and a ScrollViewer, and putting the UniformGrid inside one of them in XAML. Then, in code-behind, I programmatically detach the UniformGrid from its present container, and attach it to the other (using a boolean flag to control where it is, but that is debatable):
<Grid x:Name="grid">
<ScrollViewer x:Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"/>
<Viewbox x:Name="viewbox" Stretch="Uniform">
<UniformGrid x:Name="ugrid" Columns="2" MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
<local:AtlasMasculinoAnterior/>
<local:AtlasMasculinoPosterior/>
</UniformGrid>
</Viewbox>
</Grid>
and
bool atlasfullscreen = false;
private void UniformGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
UniformGrid ug = sender as UniformGrid;
if (atlasfullscreen)
{
scroll.Content = null;
viewbox.Child = ug;
atlasfullscreen = false;
}
else
{
viewbox.Child = null;
scroll.Content = ug;
atlasfullscreen = true;
}
}
I had a similar use case where I had an item that I needed to alternate between Stretch.None and Stretch.Uniform, and when Stretch.None, I needed the scrollbars to be visible.
What I finally figured out was that when I set Stretch.None, I needed to set the ScrollViewer's Width & Height to the ViewBox's parent ActualWidth / Height, and when Stretch.Uniform, I needed to clear the ScollViewer's width and height.
So using your original XAML, plus the new Grid, here's the new XAML:
<Grid x:Name="grid">
<Viewbox x:Name="vbox"
Stretch="Uniform">
<ScrollViewer x:Name="scroll"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<UniformGrid x:Name="ugrid"
Columns="2"
MouseLeftButtonDown="UniformGrid_MouseLeftButtonDown">
<local:AtlasMasculinoAnterior />
<local:AtlasMasculinoPosterior />
</UniformGrid>
</ScrollViewer>
</Viewbox>
</Grid>
New code behind:
private void UniformGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (vbox.Stretch == Stretch.None)
{
vbox.Stretch = Stretch.Uniform;
scroll.Width = double.NaN;
scroll.Height = double.NaN;
}
else
{
vbox.Stretch = Stretch.None;
scroll.Width = grid.ActualWidth;
scroll.Height = grid.ActualHeight;
}
}
You might need to tweak the above example for how the Viewbox now being in a grid - but for my use case with similar XAML / code I got mine working without having to constantly move the child from the Viewbox to another control and back again.
So in summary: when Viewbox.Stretch = Uniform, set scrollviewer's width / height to double.NaN, and when Viewbox.Stretch = None, set scrollviewer's width / height to Viewbox.Parent.ActualWidth / Height.
If there is a way to send mouse click event by location programatically it would be great, but if theres another approach that can solve following problem this it is fine too.
In my situation I got a canvas taking up whole application size (covering it completely) and when user clicks it with mouse I want to hide it, and then pass through this mouse click (taking its location x & y from user) to anything that is under canvas (in my case canvas visibility goes to collapsed so controls under it can be seen now).
I am guessing it is impossible, cause certain features like run silverlight fullscreen can only be done in button click handler (correct me if im wrong here).
But is there a place where I can read about those security based limitations of silverlight UI ?
you have to add an click event handler to your canvas. In this handler you get the x and y positon of your click (via MouseButtonEventArgs) and then you can use the VisualTreeHelper to get your "hit elements".
Lets assume the following xaml:
<Grid x:Name="LayoutRoot" Background="White">
<Button Width="50" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<TextBox Text="MyText" Width="200" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Canvas Background="Red" x:Name="MyCanvas" />
</Grid>
with the following code behind:
public MainPage()
{
InitializeComponent();
MyCanvas.AddHandler(MouseLeftButtonUpEvent, new MouseButtonEventHandler(handler), true);
}
void handler(object sender, MouseButtonEventArgs e)
{
var point = new Point(e.GetPosition(this).X, e.GetPosition(this).Y);
var elements = VisualTreeHelper.FindElementsInHostCoordinates(point, this);
foreach (var uiElement in elements)
{
if (uiElement is TextBox){
((TextBox) uiElement).Focus();
break;
}
if(uiElement is Button)
{
//do button stuff here
break;
}
}
MyCanvas.Visibility = Visibility.Collapsed;
MyCanvas.RemoveHandler(MouseLeftButtonUpEvent, new MouseButtonEventHandler(handler));
}
But: In this simple example, you get at about 20 hit elements. But they are sorted in the correct "z-Index". So you can iterate through it and the first interesting element for you is where you could break(Maybe you can do this with LINQ, too). So for me, I know that the first hit TextBox is what I want to focus.
Is this what you need?
BR,
TJ
How can one obtain the panel that is used within a TreeView? I've read that by default TreeView uses a VirtualizingStackPanel for this. When I look at a TreeView template, all I see is <ItemsPresenter />, which seems to hide the details of what panel is used.
Possible solutions:
1) On the treeview instance ("tv"), from code, do this: tv.ItemsPanel.
The problem is, this does not return a panel, but an ItemsPanelTemplate ("gets or sets the template that defines the panel that controls the layout of the items").
2) Make a TreeView template that explicitly replaces <ItemsPresenter /> with your own ItemsControl.ItemsPanel. I am providing a special template anyways, so this is fine in my scenario. Then give a part name to the panel that you place within that template, and from code you can obtain that part (i.e. the panel). The problem with this? see below.
(I am using a control named VirtualTreeView which is derived from TreeView, as is seen below):
<ControlTemplate x:Key="VirtualTreeViewTemplate" TargetType="{x:Type local:VirtualTreeView}">
<Border>
<local:VirtualScrollViewer
Style="{StaticResource VirtualScrollViewer}"
x:Name="PART_VirtualScrollViewer"
CanContentScroll="True">
<!-- instead of: <ItemsPresenter />, use following: -->
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel
Name="PART_ItemsStackPanel"
IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</local:VirtualScrollViewer>
</Border>
</ControlTemplate>
[I stripped out all clutter here for visibility...]
The problem with this is: this immediately overrides any TreeView layout mechanism. Actually, you just get a blank screen, even when you have TreeViewItems filling the tree. Well, the reason I want to get a hold of the panel is to take some part in the MeaureOverride, but without going into all of that, I certainly do not want to rewrite the book of how to layout a treeview. I.e., doing this the step #2 way seems to invalidate the point of even using a TreeView in the first place.
Sorry if there is some confusion here, thanks for any help you can offer.
There is a class called VisualTreeHelper that allows you to get non-exposed child controls/elements of a control.
Here is a link to the GetChild method on that class which allows you to enumerate all the children, etc:
http://msdn.microsoft.com/en-us/library/system.windows.media.visualtreehelper.getchild.aspx
The following is a supplement to the answer given by David above. This offers a way to get all of the Visual Children that are UIElements via an extension method.
public static class WPFXtensions
{
static public IEnumerable<UIElement> GetDescendantUIElements(this UIElement uiElement)
{
int childrenCnt = VisualTreeHelper.GetChildrenCount(uiElement);
for (int i = 0; i < childrenCnt; i++)
{
Visual childVisual = VisualTreeHelper.GetChild(uiElement, i) as Visual;
if(childVisual == null)
continue;
if (childVisual is UIElement)
{
yield return childVisual as UIElement;
// note: by recursively calling within the loop, we walk the tree all the way down for each
// UIElement encountered before moving to the next UIElement sibling.
foreach (UIElement e in GetDescendantUIElements(childVisual as UIElement))
yield return e;
}
}
}
}
// Use this then like this to retrieve an expected child StackPanel
StackPanel sp1 = (StackPanel)this.GetDescendantUIElements()
.First(uiElem => uiElem is StackPanel);
// Get all of this UIElement's descendants (for a diagnostic look);
// In a run where this was a TreeView, 78 UIElements returned
List<UIElement> uiElements = this.GetDescendantUIElements().ToList();
Is it possible to change or modify a specific part of a control template without having to recreate the entire control template of the control in the xaml?
For example, I was trying to get rid of the border of a textbox, so I could throw together a basic search box with rounded corners (example xaml below). Setting the borderthickness to 0 works fine, until you mouse over the textbox and a pseudo border they added to the control flashes up. If I look at the controltemplate for the textbox, I can even see the visual state is named, but cannot think of how to disable it.
Without overriding the control template of the TextBox, how would I stop the Visual State Manager firing the mouse over effect on the TextBox?
<Border Background="White" CornerRadius="10" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="3" BorderBrush="#88000000">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Margin="5,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Path Height="13" Width="14" Stretch="Fill" Stroke="#FF000000" StrokeThickness="2" Data="M9.5,5 C9.5,7.4852815 7.4852815,9.5 5,9.5 C2.5147185,9.5 0.5,7.4852815 0.5,5 C0.5,2.5147185 2.5147185,0.5 5,0.5 C7.4852815,0.5 9.5,2.5147185 9.5,5 z M8.5,8.4999971 L13.5,12.499997" />
<TextBox GotFocus="TextBox_GotFocus" Background="Transparent" Grid.Column="1" BorderThickness="0" Text="I am searchtext" Margin="5,0,5,0" HorizontalAlignment="Stretch" />
</Grid>
</Border>
I've found a way to do this, by inheriting off the control and overriding the OnApplyTemplate. It's not ideal, but I think it's better than having to copy the entire control template. Here's an example of creating a borderless textbox, essentially disabling the mouse over visual state by always clearing the storyboard:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;
namespace SilverlightTestApplication
{
public class BorderlessTextBox : TextBox
{
public BorderlessTextBox()
{
BorderThickness = new System.Windows.Thickness(0);
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
//Get the mouse over animation in the control template
var MouseOverVisualState = GetTemplateChild("MouseOver") as VisualState;
if (MouseOverVisualState == null)
return;
//get rid of the storyboard it uses, so the mouse over does nothing
MouseOverVisualState.Storyboard = null;
}
}
}
Its been awhile since I used XAML, but no, I don't believe you can just modify a piece of the template.
However if you have the IDE you can create a copy of the currently applied template and just modify the piece you want and leave the rest as is. See the How to Edit section of this link.
Retrieve the default template of every control, with the XAML reader, then copy/paste and modify what you want... not very clean but I think this is the only way (I'm searching how to retrieve this default template)
In WPF, not sure about silverlight here a snippet of code to retrieve the template of Aero, you can try to copy/paste and change what you want:
public Window1()
{
InitializeComponent();
using(FileStream fs = new FileStream("C:/TextBoxTemplate.xaml", FileMode.Create))
{
var res = LoadThemeDictionary(typeof(TextBox), "Aero", "NormalColor");
var buttonRes = res[typeof(TextBox)];
XamlWriter.Save(buttonRes, fs);
}
}
public static ResourceDictionary LoadThemeDictionary(Type t,
string themeName, string colorScheme)
{
Assembly controlAssembly = t.Assembly;
AssemblyName themeAssemblyName = controlAssembly.GetName();
object[] attrs = controlAssembly.GetCustomAttributes(
typeof(ThemeInfoAttribute), false);
if(attrs.Length > 0)
{
ThemeInfoAttribute ti = (ThemeInfoAttribute)attrs[0];
if(ti.ThemeDictionaryLocation ==
ResourceDictionaryLocation.None)
{
// There are no theme-specific resources.
return null;
}
if(ti.ThemeDictionaryLocation ==
ResourceDictionaryLocation.ExternalAssembly)
{
themeAssemblyName.Name += "." + themeName;
}
}
string relativePackUriForResources = "/" +
themeAssemblyName.FullName +
";component/themes/" +
themeName + "." +
colorScheme + ".xaml";
Uri resourceLocater = new System.Uri(
relativePackUriForResources, System.UriKind.Relative);
return Application.LoadComponent(resourceLocater)
as ResourceDictionary;
}
I 've never used Silverlight, but I don't think there is a lot of things to do to adapt this template to Silverlight.
Source : Default template in WPF