0

我制作了一个用户控件，其中我的根容器是一个网格。

网格有 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>

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

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

在此处输入图像描述

4

2 回答 2

4

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

于 2013-09-09T08:22:05.400 回答
0

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

 <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition />
        <ColumnDefinition Width="30"/>
    </Grid.ColumnDefinitions>
于 2013-09-09T08:21:11.257 回答