在TreeView中停靠列 [英] Dock a column in a TreeView
问题描述
嗨
我正在创建一个wpf应用程序（我的第一个:)）我有一点问题。
在我的应用程序中，我有一个TreeView有两列，第一列有一个字符串，第二列有一个按钮。窗口只包含该控件。
我想要的是TreeView填满整个窗口，最后一列必须始终在窗口右侧可见，总是有相同的宽度。
Ex：
Hi
I am creating a wpf application (my first one :) ) and I have a little problem.
In my application, I have a TreeView widt two columns, the first one with a string and the second one with a button. And the window only contains that control.
What I want is that TreeView fill the whole window and the last column must be always visible at the right side of the window, always with the same width.
Ex:
<----- window width ------>
+-----------------------+---+
1 2
新窗口宽度
A new window width
<--------- window width ---------->
+-------------------------------+---+
1 2
我要问的是解决这种情况的一些指令， XAML或代码。
---更新---
这是XAML代码：< br $> b $ b
What I ask is some directives to resolve this situation, XAML or code.
--- UPDATE ---
Here is the XAML code:
<TreeView Name="trvFamilies">
<TreeView.Resources>
<HierarchicalDataTemplate DataType="{x:Type self:Family}" ItemsSource="{Binding Members}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</HierarchicalDataTemplate>
<DataTemplate DataType="{x:Type self:FamilyMember}">
<StackPanel Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="230"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Column="0"/>
<Button Grid.Column="1" >C</Button>
</Grid>
</StackPanel>
</DataTemplate>
</TreeView.Resources>
<TreeView.ItemContainerStyle>
<Style TargetType="TreeViewItem">
<Setter Property="VerticalContentAlignment" Value="Top" />
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
我从互联网上获取此代码，我根据自己的情况调整了它。显然，它有很多问题，但我现在关注的只是两栏情况。
祝你好运
Filipe Marques
I get this code from internet and I am adapted it to my situation. Obviously, there is a lot of things wrong with it, but my concern for now is just the two columns situation.
Best regards
Filipe Marques
推荐答案
我有一些工作。
第一列宽度必须为*。
第二个必须是auto（假设你的按钮宽度相同）。
现在必须根据剩余的可用空间改变网格宽度窗口。
我们用转换器来做这件事。
I've got something working.
The first column width must be "*".
The second must be "auto" (assuming your buttons have the same width).
The grid width must now be altered based on the available space left in the window.
We do this with a converter.
<grid width="{Binding ., UpdateSourceTrigger=PropertyChanged, Converter={local:GridWidthConverter}}"></grid>
<Grid Margin="10">
<TreeView Name="trvMenu">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:MenuItem}" ItemsSource="{Binding Items}">
<Border BorderBrush="Yellow" Padding="5" BorderThickness="1">
<Grid Width="{Binding ., UpdateSourceTrigger=PropertyChanged, Converter={local:GridWidthConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border BorderBrush="AliceBlue" Padding="5" Grid.Column="0" BorderThickness="1">
<TextBlock Text="{Binding Title}" />
</Border>
<Border BorderBrush="Red" Padding="5" Grid.Column="1" BorderThickness="1">
<Button Width="80" Height="25" >C</Button>
</Border>
</Grid>
</Border>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Grid>
转换器需要物品的等级，以便它可以计算屏幕左侧的缩进。
所以我把它添加到课堂上：
The converter needs the level of the item so it can calculate the indent from the left of the screen.
So I added this to the class:
public class MenuItem
{
public MenuItem()
{
this.Items = new ObservableCollection<MenuItem>();
}
public string Title { get; set; }
public int level;
public ObservableCollection<MenuItem> Items { get; set; }
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
MenuItem root = new MenuItem() { Title = "Menu", level=1 };
MenuItem childItem1 = new MenuItem() { Title = "Child item #1", level=2 };
childItem1.Items.Add(new MenuItem() { Title = "Child item #1.1", level=3 });
childItem1.Items.Add(new MenuItem() { Title = "Child item #1.2",level=3 });
root.Items.Add(childItem1);
root.Items.Add(new MenuItem() { Title = "Child item #2", level=2 });
trvMenu.Items.Add(root);
}
private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
trvMenu.BeginInit();
trvMenu.EndInit();
}
现在转换器：
Now for the converter:
class GridWidthConverter : System.Windows.Markup.MarkupExtension, IValueConverter
{
public GridWidthConverter()
{
}
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
MenuItem menuItem = (MenuItem)value;
return (App.Current as App).TreeViewWindow.ActualWidth - (App.Current as App).TreeViewIndent - (App.Current as App).ExtraSpace - (menuItem.level * (App.Current as App).TreeViewIndent);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return true;
}
private static GridWidthConverter instance;
public override object ProvideValue(IServiceProvider serviceProvider)
{
if (instance == null)
instance = new GridWidthConverter();
return instance;
}
}
转换器返回：Window.ActualWidth - 树视图缩进 - extraSpace（边距，填充， ....） - （level * treeview indent）。
The converter returns: Window.ActualWidth - treeview indent - extraSpace (margins, padding, ....) - (level * treeview indent).
public partial class App : Application
{
public Window TreeViewWindow;
public double TreeViewIndent = 20;
public double ExtraSpace = 50;
}
现在所有按钮都是节点将对齐到窗口的右侧。
这是一种黑客行为。
所以我不会使用树视图，但如果可能的话，请使用带有usercontrol的列表框。
（我不知道如何把截图放在回答中）
Now all the buttons of all nodes will be aligned to the right side of the window.
It's kind of a hack.
So I would not go with a treeview, but use a listbox with a usercontrol if possible.
(I have no idea how to put a screenshot in the "answer")
我刚看了你的xaml - didn'试试。
但我认为你必须定义你的第一个网格列Auto或带有星形符号，如下所示：
Hi,
I just did a quick look at your xaml - didn't try.
But I think you have to define your first grid column Auto or with star Notation, something like this:
<ColumnDefinition Width="230*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
宽度必须设置为*，如下所示。
Width must be set to "*" as shown below.
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
如果将其设置为自动，左列将设置其宽度根据其内容。
If you set it to "Auto" the left column will set its width according to its contents.
这篇关于在TreeView中停靠列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
