[英]Xaml, middle column not taking up full width
How do I make my middle column take up the full width available while allowing space for the comment section so that all those comment boxes are nicely aligned to the right: 如何让我的中间列占用可用的全宽,同时为注释部分留出空间,以便所有这些注释框都很好地与右边对齐:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
</StackPanel.Background>
<TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
I tried placing horizontal align on the third stackpanel but that actually didn't work. 我尝试在第三个堆叠面板上放置水平对齐但实际上没有用。
EDIT: Thanks for the tries but no cigar: 编辑:感谢尝试,但没有雪茄:
You need to alter the style of the ListBoxItem
itself to ensure that the content is stretched across the available width. 您需要更改ListBoxItem
本身的样式,以确保内容在可用宽度上展开。
Define this style: 定义这种风格:
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
Then the Right alignment of the "Comments" image will work and the central text box will stretch to fill the available space. 然后“注释”图像的右对齐将起作用,中央文本框将拉伸以填充可用空间。
You might find that just using a StackPanel
with an horizontal orientation works better than a Grid
for the item template, especially if the data in columns 0 and 2 are a constant width. 您可能会发现仅使用具有水平方向的StackPanel
比项目模板的Grid
更好,特别是如果第0列和第2列中的数据是恒定宽度。
Play around with the space given for the columns, for example: 使用为列提供的空间,例如:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
This gives the center column 3 times more space than the right column 这使中心列的空间比右列多3倍
It's hard to tell exactly what you want because of how you've blurred your image. 由于你的图像模糊,很难确切地说出你想要的东西。 But I think the key is to make the container of the grid take up all available space, HorizontalAlignment="Stretch"
. 但我认为关键是要使网格的容器占用所有可用空间, HorizontalAlignment="Stretch"
。
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<!-- items here -->
</Grid>
</StackPanel>
The item you set to have Grid.Column="0"
will have width 67dip, the one with Grid.Column="2"
will be width 60dip, and the one with Grid.Column="1"
will fill up the rest of the space. 您设置为Grid.Column="0"
项目的宽度为67dip, Grid.Column="2"
项目宽度为60dip, Grid.Column="1"
将填充剩下的空间。
dip = device independent pixels - all Windows Phone apps are measured as if the screen is 480x800 and then rendered at the actual resolution of the screen. dip =设备无关像素 - 所有Windows Phone应用程序都被测量为屏幕为480x800,然后以屏幕的实际分辨率进行渲染。
Inside a StackPanel you can't do HorizontalAlignment to right while its orientation is LeftToRight, as far as I know. 在StackPanel内部,就我所知,你的方向是LeftToRight,你不能向右对齐HorizontalAlignment。 Avoid using it. 避免使用它。
The problem stems from using a StackPanel as the top-most UIElement. 问题源于使用StackPanel作为最顶层的UIElement。 Use a Grid instead and follow the rest of this advice: Right align content in ListBox 请改用网格,并遵循以下建议: 右键对齐ListBox中的内容
Which leads to this answer as well: C# windows phone -Alignment in xaml ListBox.ItemTemplate 这导致了这个答案: C#windows phone -Alignment in xaml ListBox.ItemTemplate
Your problem is the Button, if it's not mandatory try deleting it and add a "Tap" Event to the StackPanel, i've tried it and it works. 你的问题是Button,如果它不是强制性的,请尝试删除它并向StackPanel添加一个“Tap”事件,我已经尝试了它并且它有效。
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel Tap="...">
// no <Button> here
<Grid>
---
</Grid>
// no </Button> here
</StackPanel>
</DataTemplate>
better option 更好的选择
<DataTemplate x:Key="ActivityStreamItemTemplate">
<Grid Tap="...">
...
</Grid>
</DataTemplate>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.