Is anyone familiar with websites that have an attribute similar to a tree-view? Like the download segment of the Microsoft website. You press the plus button, it expands and everything below it moves further down. You press the minus button and everything in that block collapses and the content below shifts back up.
Granted C# is nothing like HTML and CSS but I just wanted to know if it was possible to do the same in a WPF application.
It seems like the tree-view currently in the tool box allows for text only to be implemented. It doesn't allow for additional objects such as labels or text-boxes.
I discovered the EXPANDER and it does a good job of expanding and collapsing its content's but isn't quite capable of pulling objects beneath it back up or pushing them back down. Here's an example of the scenario I would like.
An example of what I'm going for would be microsoft's download page if it helps. How their expand and collapse buttons work.
So is there any way to do this?
Here is an example of using the Expander as the way the download page on Microsoft uses it. Note that the Height of the RowDefinitions is set to Auto, otherwise the Expander does not collapse when IsExpanded is set to false.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander IsExpanded="True">
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock Height="50" Text="Hello" />
</Border>
</Expander>
<Expander Grid.Row="1" IsExpanded="True">
<Border BorderBrush="Green" BorderThickness="2">
<TextBlock Height="50" Text="World" />
</Border>
</Expander>
</Grid>
regular tree view can do what you ask.
see this wonderful code-project explanation:
http://www.codeproject.com/Articles/124644/Basic-Understanding-of-Tree-View-in-WPF
WPF Expander component do exactly what you want and it push down other control if hosted in a proper panel. Try using a StackPanel for example.
Related
How to create in WPF C# App a customized pop up window (Message Box) like windows 8/ windows store apps popups, is it feasible to create it? I need to have the design as the attached image
I'm using Devexpress for WPF as third parties controls.
thanks
Yes, put everything in a grid followed by another grid containing the message box. The rest is up to you to show and hide the message box and style it. The grid with the background makes everything un-interactable.
<Grid>
<!--Everything-->
<Grid Background="#6666">
<Border Background="White" VerticalAlignment="Center" Padding="10">
<StackPanel HorizontalAlignment="Center" MinWidth="300">
<TextBlock Text="My Title"/>
<WrapPanel HorizontalAlignment="Right">
<Button Content="Ok"/>
<Button Content="Cancel"/>
</WrapPanel>
</StackPanel>
</Border>
</Grid>
</Grid>
With DevExpress you are probably looking at either:
WinUIMessageBox
WinUIDialogWindow
Both can be found at this link.
I think you may want to use the FlyoutControl for this. DevExpress has a nice example of using it in a modal form in their How To: Create a Modal Message Box Flyout documentation.
I'm building a vertical timeline app using WPF, something like this:
The app is divided into 2 sides, on the left are the dates in circles, and on the right are the details.
Let's say on my screen I can only see 2 circles on the left, and on the right are some very long details. What I want to achieve is, when I scroll down, the first circle goes up the screen, then gets stuck at the top instead of going out of my view.
It's like Telegram on Android, the sender's display picture will always be on top no matter the user scrolls up or down, till the next sender's display picture comes in.
I hope I'm able to explain myself clearly. I've managed to create the app in WPF, now I would like to do the enhancement mentioned above, but I have no idea where to start.
EDIT:
Here are two images to explain what I want to achieve.
Before scrolling down
After scrolling down
The very simplest solution that I can think of would be to use a HeaderedItemsControl. This would allow you to set your top item as the header and all the other items as your list items.
<Grid>
<HeaderedItemsControl>
<HeaderedItemsControl.Template>
<ControlTemplate TargetType="{x:Type HeaderedItemsControl}">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter ContentSource="Header" />
<!--<Separator Grid.Row="1" />-->
<ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Visible">
<ItemsPresenter />
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</HeaderedItemsControl.Template>
<HeaderedItemsControl.Header>Mark</HeaderedItemsControl.Header>
<HeaderedItemsControl.Items>
<system:String>Mark2</system:String>
<system:String>Mark3</system:String>
<system:String>Mark4</system:String>
<system:String>Mark5</system:String>
<system:String>Mark6</system:String>
<system:String>Mark7</system:String>
<system:String>Mark7</system:String>
</HeaderedItemsControl.Items>
</HeaderedItemsControl>
</Grid>
I am new to WPF so I would accept every piece of advice. My problem:
I use the Designer to put different components of the UI the way I like. And it's great. The problem came with this type of XAML structure:
<Window>
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
/* Couple of buttons */
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="223*"/>
<RowDefinition Height="99*"/>
</Grid.RowDefinitions>
<TabControl Margin="85,0,0,0" Padding="0,-5,0,0" Grid.RowSpan="2">
<TabItem Visibility="Collapsed">
<Grid>
/* textboxes and labels */
</Grid>
</TabItem>
<TabItem Visibility="Collapsed">
<Grid>
<Border Visibility="Hidden" Margin="136,66,76,66" Panel.ZIndex="10" BorderThickness="1" Width="320" Height="180">
<Grid Background="White">
<Grid.Effect>
<DropShadowEffect BlurRadius="10" RenderingBias="Quality" Direction="270" ShadowDepth="3" Opacity="0.1"/>
</Grid.Effect>
/* labels, textboxes and buttons */
</Grid>
</Border>
<TabControl Margin="0,0,0,38">
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
/* other elements */
</Grid>
</TabItem>
<TabItem>
<Grid>
<Grid>
/* checkboxes */
</Grid>
<Grid>
/* checkboxes */
</Grid>
/* labels */
</Grid>
</TabItem>
<TabItem>
<Grid>
</Grid>
</TabItem>
</TabControl>
/* buttons and labels */
</Grid>
</TabItem>
</TabControl>
</Grid>
</Grid>
Usually when I want to move something on the scene I just select it and drag / change it since it's a lot easier than just writing it in XAML. However, using the code above, if I want to select something from the inner TabControl I just can't. It automatically selects the one above which makes it a bit harder to manage the UI. My guess it's something to do with the Z-Index but I'm not really sure. I know it is probably a noobish question but it makes me struggle so I will be very thankful if someone explains this to me!
Thanks!
Well my guess is you have grids layered on top of each other that are capturing the clicks and preventing the selection of the elements below (z-order like you mention).
A few things to note
This isn't really specific to the designer, if you have Hit Testable elements layered on top of each, even if they look transparent, they will still capture the click and "steal" focus. You can do various things to prevent this, one option might be setting IsHitTestVisible=false on elements that you want clicks to "pass through" to elements below it. Another option is to set the Background of an element to {x:Null}, instead of the default (which is Transparent).
You can use the Document Outline panel probably on the left hand side of your VS window (or View | Other Windows | Document Outline) to navigate the Visual Tree...visually. This would allow you to "select" an item even it is underneath other items. However, even once it is selected in the document outline it won't be floated to the top of the design surface, so you won't be able to drag it around to position it, but you will be able to grab re-size handles and access the properties window for the selected element.
Ultimately you have to "hide" the element that is on top of it to get the drag positioning you want.
I had the same issue - I was busy laying out my app in the WPF designer, and things that I could move around before were unselectable and undraggable, with the TabControl always stealing focus.
The issue seems to be with the TabItem being Collapsed. I found it impossible to select anything inside a TabItem that had Visibility="Collapsed".
If you need to move things around try changing the visibility to Visible temporarily - I was able to move things around in the designer and then later set the visibility back again.
I haven't tested this particularly thoroughly and it's a bit of a kludge, but it worked well enough for me to do the layout.
I have a small user control that contains some Xaml markup that includes a TextBox. When the control is selected, I automatically set focus on the TextBox. However, when the user clicks on any other element (such as a border) the focus is removed from the TextBox.
For example,
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Fill="Blue" IsHitTestVisible="False" />
<TextBox Grid.Row="1" />
<TextBlock Grid.Row="2" Text="Something" IsHitTestVisible="False" />
</Grid>
Clicking either the Rectangle or the TextBlock causes the TextBox to lose focus.
What's the best way to retain focus on the TextBlock? I feel I'm missing something simple.
The click is probably going through the grid and giving focus to whatever is under it.
Try setting Background="Transparent" on the <Grid>
The only solution I found was to rebuild the Xaml surrounding the control in question so that custom control incorporated everything that I wanted to not affect the the focus of the text box. And then put a handler on the mouse event to ensure that the TextBox retained focus.
I was not happy with the solution but couldn't think of anything else.
( I did try to handle the LostFocus event and determine if the mouse was still the user control, but gave up with that route when I had to continually keep track of the mouse location ).
What is the name of the control that is highlighted blue?
I want to make this:
(source: deviantart.net)
It would be helpful if you found some link to a library. I've searched using many different names (TaskButton/TaskPanel/StackPanel) but I'm really off.
Thanks.
Please note that the second image is only a concept sketch, and that it's not a real application.
This is most likely a custom (user) control which has been created by composing a number of standard WPF controls. It could easily be constructed in WPF using a horizontal StackPanel with various Image, TextBlock and Button elements as its content
I do not believe that the control you are pointing to is a .NET or WPF control. Most Windows 7 user interface elements are still native C/C++ resources.
That said, it is relatively easy to replicate that behavior using WPF 4.0, through a ListBox with a custom ItemTemplate. Take a look at this question to get you started.
It looks rather like a CommandLink control to me, something that first appeared in Vista. It's never been exposed as a control for use in Windows Forms or WPF, but this question contains information on how to make it available for your own use:
I suppose it is a WPF user control, created specifically for this application. It looks like it consists of a Image, some TextBox controls and a Button which in turn contains an Image.
I don't know how that control is called but my bet it is it's a custom windows form control, here's a link to get you started
I got it. You can do this with the help of a simple button in WPF.
You have to embed another button and those images to that button.
<Window x:Class="WpfApplication1.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">
<Grid>
<Button Height="38" Margin="12,49,83,0" Name="button1" VerticalAlignment="Top"></Button>
<Grid Height="32" Margin="113,48,80,0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="13*" />
<RowDefinition Height="19*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="12*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<Button Margin="0,6,0,0" Name="button2" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="3" Grid.RowSpan="2">Button</Button>
<Button Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="17,6,3,0" Name="button3" Grid.Column="2">Button</Button>
</Grid>
</Grid>
</Window>