Question

我已经创建了一个usercontrol，其中我的rootcontainer是一个网格。

网格有3列，我想将第一列和最后一列固定为30。中间列应占用所有剩余空间。

但我的代码无效......

这是我的代码：

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="{DynamicResource DarkGrey}">

<i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseEnter">
        <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Expand"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeave">
        <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="Collapse"/>
    </i:EventTrigger>
    <i:EventTrigger EventName="MouseLeftButtonDown" SourceObject="{Binding ElementName=UserStatusLabel}">
        <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="CenterUserName"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="30"/>
    </Grid.ColumnDefinitions>
    <VisualStateManager.CustomVisualStateManager>
        <ei:ExtendedVisualStateManager/>
    </VisualStateManager.CustomVisualStateManager>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.3" To="Expand"/>
                <VisualTransition GeneratedDuration="0:0:0.1" To="Collapse"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Expand">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="UserControl">
                        <EasingDoubleKeyFrame KeyTime="0" Value="90"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="UserCallAlarmPanel">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static VerticalAlignment.Top}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Collapse"/>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <StackPanel x:Name="UserCallAlarmPanel" Grid.Column="0" Background="{DynamicResource DarkGrey}" Margin="0,0,2,0" HorizontalAlignment="Left" VerticalAlignment="Center">
        <Viewbox Height="25"> 
            <ContentControl Content="{DynamicResource calls_icon}" />
        </Viewbox>
        <Viewbox Height="25"> 
            <ContentControl Content="{DynamicResource alarm_icon}"/>
        </Viewbox>
    </StackPanel>

    <StackPanel x:Name="UserContainer" Orientation="Vertical" VerticalAlignment="Center" Grid.Column="1" Background="{DynamicResource Red}" >
        <TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Text="Onthaal Telefoon" VerticalAlignment="Top" FontFamily="Segoe UI Semibold" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,2"/>
        <TextBlock x:Name="UserStatusLabel" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FFE5E5E5"><Run Language="nl-nl" Text="Demeestere advocaten"/></TextBlock>
    </StackPanel>

    <Viewbox x:Name="StatusIconContainer" VerticalAlignment="Center" Grid.Column="2" OpacityMask="Black"> 
        <ContentControl x:Name="StatusIcon" Content="{DynamicResource appbar_check_orange}" VerticalAlignment="Top" />
    </Viewbox>
</Grid>
</UserControl>

我已将中间列的宽度设置为“*”，但这显然不起作用。

当我将中间列背景设置为蓝色时，这就是它的样子：

enter image description here

Answer 1

要么必须给出一些应该大于60（30 + 30）的宽度，要么必须设置HorizontalAlignment="Stretch"以便将网格占据整个空间。在网格拉伸以填充其父级后，中间列将占用第一列和最后一列的30和30之后剩余的剩余空间

Answer 2

只是不要为中间的ColumnDefinition定义宽度，它将填满所有可用空间。

 <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition />
        <ColumnDefinition Width="30"/>
    </Grid.ColumnDefinitions>

使中间列占用所有剩余空间

2 个答案: