问题描述
||
我有2行4列的网格
第一行包含标题
第二行包含水平折叠的ListBox内容,其中listBoxItems是具有4个列项目(4个textBlocks)的水平方向的StackPanels,我希望这些列具有与Grid Columns相同的宽度
我该怎么做?非常感谢您的帮助!!!
这就是我现在所拥有的
<UserControl
xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"
xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"
xmlns:toolkit=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit\"
xmlns:d=\"http://schemas.microsoft.com/expression/blend/2008\"
xmlns:mc=\"http://schemas.openxmlformats.org/markup-compatibility/2006\"
xmlns:sdk=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk\"
xmlns:local=\"clr-namespace:SilverlightForum\"
mc:Ignorable=\"d\"
x:Class=\"SilverlightForum.Assets.ForumBoardControl\">
<UserControl.Resources>
<Style x:Key=\"ListBoxItemStyle\" targettype=\"ListBoxItem\">
<Setter Property=\"HorizontalContentAlignment\" Value=\"Stretch\"/>
<Setter Property=\"HorizontalAlignment\" Value=\"Stretch\"/>
</Style>
</UserControl.Resources>
<StackPanel Orientation=\"Vertical\" Margin=\"0\" VerticalAlignment=\"Top\" HorizontalAlignment=\"Stretch\">
<sdk:DataPager displayMode=\"FirstLastPrevIoUsNext\" Source=\"{Binding}\" x:Name=\"dataPagerListBoxBoardTop\" HorizontalAlignment=\"Right\"/>
<Grid Margin=\"0\" HorizontalAlignment=\"Stretch\">
<Grid.ColumnDeFinitions>
<ColumnDeFinition Width=\"70\"/>
<ColumnDeFinition Width=\"350*\"/>
<ColumnDeFinition Width=\"70*\"/>
<ColumnDeFinition Width=\"70*\"/>
</Grid.ColumnDeFinitions>
<Grid.RowDeFinitions>
<RowDeFinition />
<RowDeFinition />
</Grid.RowDeFinitions>
<Border x:Name=\"StackPanelBoardColumn1\" CornerRadius=\"6,0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"0\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,1\" StartPoint=\"0.5,0\">
<GradientStop Color=\"Red\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name=\"StackPanelBoardColumn2\" CornerRadius=\"0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"1\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,0\">
<GradientStop Color=\"Blue\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name=\"StackPanelBoardColumn3\" CornerRadius=\"0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"2\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,0\">
<GradientStop Color=\"Green\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name=\"StackPanelBoardColumn4\" CornerRadius=\"0,6,0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"3\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,0\">
<GradientStop Color=\"#FF6D869F\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ListBox x:Name=\"listBoxBoard\" Grid.ColumnSpan=\"4\" Grid.Row=\"1\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\" Background=\"Transparent\" BorderThickness=\"0\" Margin=\"0\" Padding=\"0\" HorizontalContentAlignment=\"Stretch\" ItemContainerStyle=\"{StaticResource ListBoxItemStyle}\" ItemsSource=\"{Binding}\">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin=\"0\" HorizontalAlignment=\"Stretch\" x:Name=\"GridBoard\">
<Grid.ColumnDeFinitions>
<ColumnDeFinition Width=\"70\"/>
<ColumnDeFinition Width=\"350*\"/>
<ColumnDeFinition Width=\"70*\"/>
<ColumnDeFinition Width=\"70*\"/>
</Grid.ColumnDeFinitions>
<StackPanel Grid.Column=\"0\" Margin=\"0,1,0\" Background=\"#FFE7EAEF\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<HyperlinkButton FontSize=\"16\" Margin=\"0,0\" Padding=\"8\" Foreground=\"Black\" FontWeight=\"Bold\"/>
</StackPanel>
<StackPanel Grid.Column=\"1\" Margin=\"1,0\" Background=\"#FFF0F4F7\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<HyperlinkButton FontSize=\"14\" Margin=\"0\" Padding=\"8,8,0\" Foreground=\"#FFD97B33\" FontWeight=\"Bold\" Content=\"{Binding TopicName}\" />
<sdk:Label Margin=\"0\" Padding=\"8,8\" Foreground=\"Black\" Content=\"{Binding UserName,StringFormat=\'Started by {0}\'}\" />
</StackPanel>
<StackPanel Grid.Column=\"2\" Margin=\"1,0\" Background=\"#FFE7EAEF\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<TextBlock Margin=\"0\" Padding=\"8,0\" d:IsHidden=\"True\" ><Run FontWeight=\"Bold\" Text=\"{Binding TopicPostsCount}\" /><Run Text=\" Replies(s)\" Foreground=\"#FF000000\" /></TextBlock>
<TextBlock Margin=\"1,1\" Padding=\"8,8\"><Run FontWeight=\"Bold\" Text=\"{Binding TopicViewsCount}\" /><Run Text=\" Views(s)\" Foreground=\"#FF000000\" /></TextBlock>
</StackPanel>
<StackPanel Grid.Column=\"3\" Margin=\"1,0\" Background=\"#FFF0F4F7\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<sdk:Label Margin=\"0\" Padding=\"4,4,0\" Content=\"Last post on {Date}\"/>
<sdk:Label Margin=\"0\" Padding=\"4,4\" Content=\"by {User}\"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<sdk:DataPager displayMode=\"FirstLastPrevIoUsNext\" Source=\"{Binding}\" x:Name=\"dataPagerListBoxBoardBottom\" HorizontalAlignment=\"Right\"/>
</StackPanel>
</UserControl>
解决方法
我猜您可以做的是将textBlocks的宽度绑定到已在一列中拉伸的某种“不可见”网格的实际宽度。
像这样的东西(未尝试的代码...):
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=\"*\"/>
<ColumnDefinition Width=\"*\"/>
<ColumnDefinition Width=\"*\"/>
<ColumnDefinition Width=\"*\"/>
</Grid.ColumnDefinitions>
<Grid x:Name=\"invisibleGrid\" />
</Grid>
然后,将文本框的宽度绑定到invisibleGrid的ActualWidth。
<TextBlock x:Name=\"textBlockColumn1\" Width=\"{Binding ActualWidth,ElementName=invisibleGrid}\"/>
由于存在已知问题,ActualWidth尚未更新,请在此处查看:绑定到ActualWidth无效
这是解决此问题的方法。
希望这可以帮助。
BR
TJ
附言发布一些XAMl,所以也许我可以提供更多帮助。
编辑:查看我的评论...
将此类添加到您的解决方案中(绑定到ActualWidth无效):
public class ActualSizePropertyProxy : FrameworkElement,INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public FrameworkElement Element
{
get { return (FrameworkElement)GetValue(ElementProperty); }
set { SetValue(ElementProperty,value); }
}
public double ActualHeightValue
{
get { return Element == null ? 0 : Element.ActualHeight; }
}
public double ActualWidthValue
{
get { return Element == null ? 0 : Element.ActualWidth; }
}
public static readonly DependencyProperty ElementProperty =
DependencyProperty.Register(\"Element\",typeof(FrameworkElement),typeof(ActualSizePropertyProxy),new PropertyMetadata(null,OnElementPropertyChanged));
private static void OnElementPropertyChanged(DependencyObject d,DependencyPropertyChangedEventArgs e)
{
((ActualSizePropertyProxy)d).OnElementChanged(e);
}
private void OnElementChanged(DependencyPropertyChangedEventArgs e)
{
FrameworkElement oldElement = (FrameworkElement)e.OldValue;
FrameworkElement newElement = (FrameworkElement)e.NewValue;
newElement.SizeChanged += new SizeChangedEventHandler(Element_SizeChanged);
if (oldElement != null)
{
oldElement.SizeChanged -= new SizeChangedEventHandler(Element_SizeChanged);
}
NotifyPropChange();
}
private void Element_SizeChanged(object sender,SizeChangedEventArgs e)
{
NotifyPropChange();
}
private void NotifyPropChange()
{
if (PropertyChanged != null)
{
PropertyChanged(this,new PropertyChangedEventArgs(\"ActualWidthValue\"));
PropertyChanged(this,new PropertyChangedEventArgs(\"ActualHeightValue\"));
}
}
}
这是我的xaml:
<StackPanel Orientation=\"Vertical\" Margin=\"0\" VerticalAlignment=\"Top\" HorizontalAlignment=\"Stretch\">
<Controls:DataPager DisplayMode=\"FirstLastPreviousNext\" Source=\"{Binding}\" x:Name=\"dataPagerListBoxBoardTop\" HorizontalAlignment=\"Right\"/>
<Grid Margin=\"0\" HorizontalAlignment=\"Stretch\">
<Grid.Resources>
<c:ActualSizePropertyProxy Element=\"{Binding ElementName=invisibleColumnGrid1}\" x:Name=\"column1\" />
<c:ActualSizePropertyProxy Element=\"{Binding ElementName=invisibleColumnGrid2}\" x:Name=\"column2\" />
<c:ActualSizePropertyProxy Element=\"{Binding ElementName=invisibleColumnGrid3}\" x:Name=\"column3\" />
<c:ActualSizePropertyProxy Element=\"{Binding ElementName=invisibleColumnGrid4}\" x:Name=\"column4\" />
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=\"70\"/>
<ColumnDefinition Width=\"350*\"/>
<ColumnDefinition Width=\"70*\"/>
<ColumnDefinition Width=\"70*\"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name=\"invisibleColumnGrid1\"/>
<Grid Grid.Column=\"1\" x:Name=\"invisibleColumnGrid2\"/>
<Grid Grid.Column=\"2\" x:Name=\"invisibleColumnGrid3\"/>
<Grid Grid.Column=\"3\" x:Name=\"invisibleColumnGrid4\"/>
<Border x:Name=\"StackPanelBoardColumn1\" CornerRadius=\"6,0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"0\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,1\" StartPoint=\"0.5,0\">
<GradientStop Color=\"Red\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name=\"StackPanelBoardColumn2\" CornerRadius=\"0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"1\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,0\">
<GradientStop Color=\"Blue\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name=\"StackPanelBoardColumn3\" CornerRadius=\"0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"2\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,0\">
<GradientStop Color=\"Green\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name=\"StackPanelBoardColumn4\" CornerRadius=\"0,6,0\" Padding=\"0\" Margin=\"0\" Height=\"28\" HorizontalAlignment=\"Stretch\" Grid.Row=\"0\" Grid.Column=\"3\" VerticalAlignment=\"Top\" BorderThickness=\"0\">
<Border.Background>
<LinearGradientBrush EndPoint=\"0.5,0\">
<GradientStop Color=\"#FF6D869F\" Offset=\"0\"/>
<GradientStop Color=\"#FFA6BACE\" Offset=\"1\"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ListBox
ScrollViewer.HorizontalScrollBarVisibility=\"Disabled\"
ItemsSource=\"{Binding}\"
x:Name=\"listBoxBoard\" Grid.ColumnSpan=\"4\" Grid.Row=\"1\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\" Background=\"Transparent\" BorderThickness=\"0\" Margin=\"0\" Padding=\"0\" HorizontalContentAlignment=\"Stretch\" ItemContainerStyle=\"{StaticResource ListBoxItemStyle}\" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation=\"Horizontal\">
<StackPanel Width=\"{Binding ElementName=column1,Path=ActualWidthValue}\" Background=\"#FFE7EAEF\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<HyperlinkButton FontSize=\"16\" Margin=\"0,0\" Padding=\"8\" Foreground=\"Black\" FontWeight=\"Bold\"/>
</StackPanel>
<StackPanel Width=\"{Binding ElementName=column2,Path=ActualWidthValue}\" Background=\"#FFF0F4F7\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<HyperlinkButton FontSize=\"14\" Margin=\"0\" Padding=\"8,8,0\" Foreground=\"#FFD97B33\" FontWeight=\"Bold\" Content=\"{Binding TopicName}\" />
<sdk:Label Margin=\"0\" Padding=\"8,8\" Foreground=\"Black\" Content=\"{Binding UserName,StringFormat=\'Started by {0}\'}\" />
</StackPanel>
<StackPanel Width=\"{Binding ElementName=column3,Path=ActualWidthValue}\" Background=\"#FFE7EAEF\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<TextBlock Margin=\"0\" Padding=\"8,0\" d:IsHidden=\"True\" ><Run FontWeight=\"Bold\" Text=\"{Binding TopicPostsCount}\" /><Run Text=\" Replies(s)\" Foreground=\"#FF000000\" /></TextBlock>
<TextBlock Margin=\"1,1\" Padding=\"8,8\"><Run FontWeight=\"Bold\" Text=\"{Binding TopicViewsCount}\" /><Run Text=\" Views(s)\" Foreground=\"#FF000000\" /></TextBlock>
</StackPanel>
<StackPanel Width=\"{Binding ElementName=column4,Path=ActualWidthValue}\" Background=\"#FFF0F4F7\" Orientation=\"Vertical\" VerticalAlignment=\"Stretch\" HorizontalAlignment=\"Stretch\">
<sdk:Label Margin=\"0\" Padding=\"4,4,0\" Content=\"Last post on {Date}\"/>
<sdk:Label Margin=\"0\" Padding=\"4,4\" Content=\"by {User}\"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<Controls:DataPager DisplayMode=\"FirstLastPreviousNext\" Source=\"{Binding}\" x:Name=\"dataPagerListBoxBoardBottom\" HorizontalAlignment=\"Right\"/>
</StackPanel>
我为每一行创建一个不可见的网格。然后使用它们来观察ActualSizePropertyProxy的宽度,并使用这些代理来绑定堆栈面板的宽度。