I'd like to give the user the ability to resize TreeView node by dragging its border, the same way you would resize a window.
What control should I put inside TreeNode template to make this possible?
Or, if there is no such control, what is the best way to do this?
I was playing with GridSpliter and was reminded about your question. Here's another way to do it, more light way, without 3rd party controls, besides it's always nice to have options :) This is just a sample that gives you an idea about the grid splitter:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Column1" Width="35*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition x:Name="Column2" Width="65*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Gray" BorderThickness="1" Margin="2">
<TextBlock>your treeview</TextBlock>
</Border>
<GridSplitter Width="2" ResizeBehavior="PreviousAndNext" Grid.Column="1"/>
<Border BorderBrush="Gray" BorderThickness="1" Grid.Column="2" Margin="2"/>
</Grid>
you can use avalon docking lib. It's free and super easy to setup. There are a few posts even here (on stack overflow). But basically you can just pin treeview to the side, set some properties not to allow floating or close, and you're good to go.
overview/tutorial
http://avalondock.codeplex.com/documentation
download of 1.3:
http://avalondock.codeplex.com/releases/view/48794
Related
I have a WPF application which checks for new images in a certain parent directory, and if there are new images, it switches the currently displayed images (I have 6 images).
I would like to add a feature which will allow a user to click on one of the images, and upon that click, a 'new' window will appear, showing that image enlarged, and another click anywhere on the screen will quit this enlargement and put the focus back to the other (6) images.
Is that possible? I tried googling zoom image wpf but found only mouse-drag related solutions.
I also tried using viewport but that didn't to work so well either.
Update - XAML
<Grid Grid.Row="0">
<GroupBox x:Name="AccuracyGraphsGroupBox" Header="Accuracy" Foreground="Red">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPicBox" MouseUp="AccuracyPicBox_OnMouseUp"></Image>
<Image Grid.Column="1" Width="Auto" Height="Auto" Stretch="Fill" x:Name="AccuracyPerioPicBox" MouseUp="AccuracyPerioPicBox_OnMouseUp"></Image>
</Grid>
</GroupBox>
</Grid>
As the guys mentioned in the comments, your best bet is to use a ToolTip to popup your full size image. There is a slight problem with data binding the Image.Source value from the original Image in your ToolTip, because they are not part of the normal UI visual tree and exist in their own tree. However, we can overcome this by using the ToolTip.PlacementTarget property:
<Image Name="Image" Source="/WpfApplication1;component/Images/Tulips.jpg" Height="100"
Stretch="Uniform">
<Image.ToolTip>
<ToolTip DataContext="{Binding PlacementTarget,
RelativeSource={RelativeSource Self}}">
<Border BorderBrush="Black" BorderThickness="1" Margin="5,7,5,5">
<Image Source="{Binding Source}" Stretch="None" />
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
Of course, you could just use the same Binding Path in both Image.Source properties, but I never like repeating code.
I have a WPF application. To make the full screen visible on all screen sizes, I have implemented MinHeight, MinWidth & HorizontalAlignment="Stretch" VerticalAlignment="Stretch" in Window & Containers too. I am facing some problems when the app runs on Lower Resolution screens. The window gets cut from the right side of the screen - this doesn't show Min, Max, Close btns also on top right.
If I add layout code in then the window is proper in all resolutions, but it makes blank space above the Menubar and below end. On removing , their is no space and all is well, but right side gets cut in Low Resolution screens. And with ViewBox, space above and below the layout. My XML code is like follows :
CODE UPDATED
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- MENU BAR -->
<Menu Grid.Row="0" x:Name="myMnus" VerticalAlignment="Top" Cursor="Hand" HorizontalAlignment="Stretch" IsMainMenu="True" Grid.ColumnSpan="2">
.............
</Menu>
<ToolBarTray HorizontalAlignment="Stretch" Background="White" Margin="0,19,114,0" VerticalAlignment="Top" Grid.ColumnSpan="2" >
..............
<ToolBarTray>
<TabControl Grid.Row="1" Name="tabControl1" HorizontalAlignment="Left" Margin="0,3,0,0" VerticalAlignment="Top"
TabStripPlacement="Bottom" Grid.RowSpan="2" BorderThickness="4,25,4,1" FontSize="13">
</TabControl>
<TabControl Grid.Row="2" Name="tabControl4" HorizontalAlignment="Left" Margin="0,323,0,0" VerticalAlignment="Stretch"
TabStripPlacement="Bottom" BorderThickness="4,25,4,1" FontSize="13" Background="White" Width="227">
</TabControl>
<TabControl TabStripPlacement="Bottom" MinHeight="415" MinWidth="480" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="1" Name="tabChildContainer" Margin="227,3,207,0" BorderThickness="4,25,4,1" Grid.RowSpan="2" >
</TabControl>
</Grid>
I thought by using Stretch in HorizontalAlignment and VerticalAlignment along with MinWidth and MinHeight, that it would occupy all available space horizontally and Vertically. But tabChildContainer TabControl doesn't go to the right end corner which it should go based on the code.
This is where your problem starts:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="762.976"/>
<ColumnDefinition Width="751.024"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
Anytime that you set exact pixel sizes in your UI, you're asking for exactly these kinds of problems. Setting exact sizes for sections of your application was more of a WinForms thing... WPF has numerous controls that can resize your content for you... you're using one, the Grid... just incorrectly.
Secondly, it is very unusual to use a ViewBox on your whole UI... it is not going to help you. Your best bet is to simply remove it and all of your hard-coded dimensions and make full use of the "*" and "Auto" values in your Grid. When the controls resize themselves (or a Grid resizes them) in this way, it really doesn't matter what resolution a user is using.
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.
I am in the process of completing a fault logger for my company.
Unfortunately, not all people have the same screen resolution (ranging from 800 - 1080), I need to create controls that can change size based on the window size.
So far, I have been able to force controls to change their dimensions based on window dimensions, but I am faced with a challenge of them overlapping after a certain size, as shown below:
Is there a way to force the TextBox and GroupBox to float just left of the DataGrid, so it will move right based on the width of the grid?
Grid columns will solve the overlap problem but you might want to consider using a GridSplitter control, for example:
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="True"
Width="5"
/>
References & useful pages:
"GridSplitter Class (System.Windows.Controls)" [msdn.microsoft.com]
Bing Search: 'gridsplitter'
I'm currently developing a Twitter application for Windows, similar to the Twitter client for OSX.
I'm using the Windows Shell Extensions library found here to make the entire window Aero, and be able to extend beyond the bounds of the designated window location.
I want the window buttons (Minimize, Maximize, Close) to be shown over top of the grid with the white background. This is a functionality that I thought would have been built into Windows, but apparently I'm wrong.
The two images below illustrate my point. In the second image, I want the window buttons to take precedence over the white-background grid, not the other way around like it's shown.
Is there some kind of code snippet or XAML-snippet that'll help me? Has anyone else ever had this problem before?
I stumbled upon a simple, yet dirty solution. I just made a path to go around the outside of the Windows buttons, and set the background of the outside to white, or whatever background color I was using. Then I just pieced rectangles together to make it look nice.
Here's the resulting code:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="0" Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="105" />
<ColumnDefinition Width="5" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="#FFFFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Path HorizontalAlignment="Stretch" Grid.Column="1" Stretch="Fill" VerticalAlignment="Bottom" Height="20" Fill="#FFFFFFFF" Data="M 0,4.11334L 4.008,4.11334C 1.792,4.11334 0,2.27332 0,0L 0,4.11334 Z M 140,4.11334L 135.957,4.11334C 138.192,4.11334 140,4.11334 140,0L 140,4.11334 Z " />
<Border Grid.Column="2" CornerRadius="0, 10, 0, 0" Background="#FFFFFFFF" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
And here's the resulting image:
you should hide your minimize maximize and close buttons and draw your own like described here.
http://winsharp93.wordpress.com/2009/07/21/wpf-hide-the-window-buttons-minimize-restore-and-close-and-the-icon-of-a-window/