Can anybody help me out with how to enable a treeview to scroll? There must be a simple way but I can't make it work in my code. After multiple failed tries, I currently have something like this:
<ScrollViewer CanContentScroll="True">
<TreeView ...>
</TreeView>
</ScrollViewer>
I do see an 'disabled' scrollbar, but when the notes of the treeview are larger than the screen height, no scrolling is activated.
The TreeView control itself includes a ScrollViewer in its template. You should be able to just use a TreeView inside an appropriate host (not a StackPanel!).
The TreeView contains a ScrollViewer, but as #Carlo said, the TreeView or its container needs to have a height. Alternatively, the TreeView should be hosted in a container that doesn't give infinite height to its children (i.e. a StackPanel which I think was what #Kent was meaning). So place it inside a Grid, no need to give the Grid or the TreeView an explicit height and you should get the scrollbars.
Do you have a height explicitly set on your window? If you want to see the scrollbar something must define the height of the TreeView or its container, otherwise it won't know when it needs to show the scrollbar.
Example:
<Window x:Class="StackOverflowTests.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" x:Name="window1" Height="300" Width="300">
<Grid>
<TreeView Name="treeView1" Height="150" VerticalAlignment="Top">
<TreeViewItem Header="Root" IsExpanded="True">
<TreeViewItem Header="Item 1"></TreeViewItem>
<TreeViewItem Header="Item 2"></TreeViewItem>
<TreeViewItem Header="Item 3"></TreeViewItem>
<TreeViewItem Header="Item 4"></TreeViewItem>
<TreeViewItem Header="Item 5"></TreeViewItem>
<TreeViewItem Header="Item 6"></TreeViewItem>
<TreeViewItem Header="Item 7"></TreeViewItem>
<TreeViewItem Header="Item 8"></TreeViewItem>
<TreeViewItem Header="Item 9"></TreeViewItem>
<TreeViewItem Header="Item 10"></TreeViewItem>
<TreeViewItem Header="Item 11"></TreeViewItem>
<TreeViewItem Header="Item 12"></TreeViewItem>
<TreeViewItem Header="Item 13"></TreeViewItem>
<TreeViewItem Header="Item 14"></TreeViewItem>
<TreeViewItem Header="Item 15"></TreeViewItem>
<TreeViewItem Header="Item 16"></TreeViewItem>
<TreeViewItem Header="Item 17"></TreeViewItem>
<TreeViewItem Header="Item 18"></TreeViewItem>
<TreeViewItem Header="Item 19"></TreeViewItem>
<TreeViewItem Header="Item 20"></TreeViewItem>
<TreeViewItem Header="Item 21"></TreeViewItem>
<TreeViewItem Header="Item 22"></TreeViewItem>
<TreeViewItem Header="Item 23"></TreeViewItem>
<TreeViewItem Header="Item 24"></TreeViewItem>
<TreeViewItem Header="Item 24"></TreeViewItem>
</TreeViewItem>
</TreeView>
</Grid>
</Window>
It's a simply a matter of giving the TreeView a fixed Height and Width. And maybe put it in a border. Also, i do have a MaxWidth on my items' content. For example the following is in my main window under two stack panels and it works (I'm using MahApps Metro controls):
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Border BorderThickness="2" BorderBrush="DarkGoldenrod" Margin="4">
<TreeView x:Name="TreeView" Width="400" Height="800" Focusable="True" VerticalAlignment="Top">
</TreeView>
</Border>
</StackPanel>
Instead of Tree View you can use Expander. Which can scoll With Scroll view properly this work same as Treeview.
How about just setting the height and width to a fixed amount?
I know this might not be the answer for everyone.
Related
We have got a treeview and we are adding the parent and child nodes in the design time.In the run time we would like to hide and show the parent and child nodes in the WPF Treeview. Please help me to solve this.
Here the First XAML Code
<TreeView Height="183" HorizontalAlignment="Left" >
<TreeViewItem Header="USA" Name="USA">
<TreeViewItem Header="Item a" />
<TreeViewItem Header="Item b" />
<TreeViewItem Header="Item c" />
</TreeViewItem>
<TreeViewItem Header="UK" Name="UK">
<TreeViewItem Header="Item a" />
<TreeViewItem Header="Item b" />
</TreeViewItem>
<TreeViewItem Header="German" Name="German">
<TreeViewItem Header="Item a" />
</TreeViewItem>
</TreeView>
And Here how to Expand and collapse the TreeView in Code.
private void HideParent()
{
USA.IsExpanded= false;
}
In here USA means Parent TreeViewItem.
This time I am working on a help-window mini-application (to include in the other project, the imageediting application).
I have a grid with two columns and a gridsplitter inbetween. On the left I have a treeview with several nodes (set in XAML) and on the right a flowdocumentreader.
I have about 10 resourcedictionaries where I keep my documents, one for each node, that I want to display in my flowdocumentreader. I actually have no idea how to bind this! Anybody have an idea how I can do this? My code so far (only one resourcedictionary added)
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary x:Name="About" Source="About.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="500"/>
</Grid.ColumnDefinitions>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Grid.Column="1" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns"
Width="5" Background="#FFBCBCBC"/>
<TreeView Width="250" Grid.Column="0" FontFamily="Segoe UI" FontSize="16">
<TreeViewItem Header="Help">
<TreeViewItem Header="About the application"></TreeViewItem>
<TreeViewItem Header="Getting started"></TreeViewItem>
<TreeViewItem Header="Images from Flickr"></TreeViewItem>
<TreeViewItem Header="Images from the computer"></TreeViewItem>
<TreeViewItem Header="Images from the browser"></TreeViewItem>
<TreeViewItem Header="Editing">
<TreeViewItem Header="Open and Save"></TreeViewItem>
<TreeViewItem Header="Uploading"></TreeViewItem>
<TreeViewItem Header="Crop"></TreeViewItem>
<TreeViewItem Header="Resize"></TreeViewItem>
<TreeViewItem Header="Filters"></TreeViewItem>
<TreeViewItem Header="Adding text"></TreeViewItem>
<TreeViewItem Header="Remove red eyes"></TreeViewItem>
</TreeViewItem>
</TreeViewItem>
</TreeView>
<FlowDocumentReader Grid.Column="2" >
</FlowDocumentReader>
</Grid>
You could use the Tag property of the nodes to define a string value to be loaded.
Then do a binding on the selected Node's Tag.
If you then use a converter you can load your document content from file/res.Dict or whatever:
<TreeView x:Name="documentTreeView" Width="250" Grid.Column="0" FontFamily="Segoe UI" FontSize="16">
<TreeViewItem Header="Help">
<TreeViewItem
Header="About the application"
Tag="ResDict1.xaml"></TreeViewItem>
....
<FlowDocumentReader Document="{Binding ElementName=documentTreeView, Path=SelectedItem.Tag, Converter={StaticResource stringToFlowDocumentConverter}}" Grid.Column="2" />
im trying to bind a ItemsControl to use as an Repeater (Asp.net) inside a static treeview in WPF.
Code.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<TreeView Margin="10,10,0,13" Name="TreeView1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="194" Height="200" >
<TreeViewItem Header="Cold Drinks" IsExpanded="true">
<TreeViewItem Header="Coke" IsExpanded="true">
<ItemsControl Name="list" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TreeViewItem Header="{Binding}"></TreeViewItem>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</TreeViewItem>
<TreeViewItem Header="Orange Juice"></TreeViewItem>
</TreeViewItem>
</TreeView>
</StackPanel>
</Window>
C#
list.ItemsSource = new List<string> { "Coke1", "Coke2", "Coke3" };
This results in 3 subitems that seems to be i a group, if i select one i select all.
Anyone?
Thanks,
Magnus
Set the ItemsSource-property of the TreeViewItem to your list. This will get you what you expect.
In the following code, I have set the name of your list to the TreeViewItem (as a short hack) for demonstration purposes. So your code will attach the list to the ItemsSource of the TreeViewItem.
<TreeViewItem Header="Cold Drinks" IsExpanded="true">
<TreeViewItem Header="Coke" IsExpanded="true" Name="list">
</TreeViewItem>
<TreeViewItem Header="Orange Juice">
</TreeViewItem>
</TreeViewItem>
Just wondering if it is possible to display treeview in a viewbox.
Thanks
As a very simple answer - yes it is. Not sure what you want to do with it though, so I don't know if it'd be the best approach (this might be something only you can answer).
<Viewbox Stretch="None">
<TreeView>
<TreeView>
<TreeViewItem Header="Employee1">
<TreeViewItem Header="Jesper"/>
<TreeViewItem Header="Aaberg"/>
<TreeViewItem Header="12345"/>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem Header="Dominik"/>
<TreeViewItem Header="Paiha"/>
<TreeViewItem Header="98765"/>
</TreeViewItem>
</TreeView>
</TreeView>
</Viewbox>
I'm newbie in WPF, so sorry about stupid question.
It is possible to show combobox side by side with selected TreeViewItem?
I need something like shown in the left picture at the following link: http://www.mypicx.com/03242009/Combobox_in_TreeviewItem/
I tried to do thus:
<TreeView Name="treeView1">
<TreeViewItem Header="aaa">
<ComboBox Height="19">
<ComboBoxItem Content="111" IsSelected="True"></ComboBoxItem>
<ComboBoxItem>222</ComboBoxItem>
<ComboBoxItem Content="333"></ComboBoxItem>
</ComboBox>
<TreeViewItem Header="aaa1">
</TreeViewItem>
<TreeViewItem Header="aaa2">
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="bbb">
<TreeViewItem Header="bbb1" />
<TreeViewItem Header="bbb2" />
</TreeViewItem>
<TreeViewItem Header="ccc" />
</TreeView>
and the result you can see in the right picture.
Meantime I need to know, how to do this visually. Later I need to do something with SelectedItemChanged event.
Thanks in advance!
P.S. sorry about my english
What you need to do is put your combo box inside your Header like such
<TreeView Name="treeView1">
<TreeViewItem>
<TreViewItem.Header>
<StackPanel Orientation="Horizontal">
<ComboBox Height="19">
<ComboBoxItem Content="111" IsSelected="True"></ComboBoxItem>
<ComboBoxItem>222</ComboBoxItem>
<ComboBoxItem Content="333"></ComboBoxItem>
</ComboBox>
</StackPanel>
</TreViewItem.Header>
<TreeViewItem Header="aaa1">
</TreeViewItem>
<TreeViewItem Header="aaa2">
</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="bbb">
<TreeViewItem Header="bbb1" />
<TreeViewItem Header="bbb2" />
</TreeViewItem>
<TreeViewItem Header="ccc" />
</TreeView>
Use an ItemTemplate. http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/ec6781bb-a81d-4204-bc13-937683110b0d/