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 に答える