在展开器中显示网格。

时间:2013-08-06 16:25:09

标签: wpf layout grid expander

我正在尝试使用右侧的标题创建扩展器,而不是为该扩展器添加网格。当我运行这个网格时,文本块无法使用。并且想知道在右侧创建扩展器头的最佳方法是什么。

<StackPanel >
            <Expander Header="Customer Detail" IsExpanded="False" Style="{StaticResource MainViewExpander}"  >
                <Expander.Content>
                    <StackPanel HorizontalAlignment="Stretch">
                    <Grid x:Name="ImageInformation"  Margin="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1.8*"/>
                            <ColumnDefinition Width="1.4*"/>
                            <ColumnDefinition Width="2.8*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.9*" />
                            <RowDefinition Height="0.7*" />
                            <RowDefinition Height="0.7*" />
                        </Grid.RowDefinitions>
                        <Image Source="{Binding XPath=x.null}" Grid.Column="0" Grid.RowSpan="3"/>
                        <TextBlock Name="Customername" 
                                   Grid.Column="1" 
                                   Grid.ColumnSpan="2" 
                                   Text="Customer Name" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Bottom" 
                                   TextWrapping="NoWrap" Margin="0,0,0,13" Width="140" Height="22"/>
                        <TextBlock Name="Born" 
                                   Grid.Column="1" 
                                   Grid.Row="1" 
                                   Text="Born" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Center" 
                                   TextWrapping="NoWrap" Margin="2" Width="60" />
                        <TextBlock Name="BornDetail" 
                                   Grid.Column="2" 
                                   Grid.Row="1" 
                                   Text="BornDetail" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Center" 
                                   TextWrapping="NoWrap" Margin="2" Width="125" />
                        <TextBlock Name="Speak" 
                                   Grid.Column="1" 
                                   Grid.Row="2" 
                                   Text="Speak" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Center" 
                                   TextWrapping="NoWrap" Margin="2" Width="60" />
                        <TextBlock Name="SpeakDetail" 
                                   Grid.Column="2" 
                                   Grid.Row="2" 
                                   Text="Speak" 
                                   HorizontalAlignment="Left" 
                                   VerticalAlignment="Center" 
                                   TextWrapping="NoWrap" Margin="2" Width="125" Height="16" MaxHeight="20" MaxWidth="135"/>

                    </Grid>
                    <Grid Height="150" Width="295">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" ></ColumnDefinition>
                            <ColumnDefinition Width="2*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                            <RowDefinition Height="1.2*"></RowDefinition>
                        </Grid.RowDefinitions>

                        <TextBlock Text="" Grid.Column="0" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="0" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="1" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="2" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="3" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="3" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="4" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="5" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="6" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="7" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="8" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="0" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                        <TextBlock Text="" Grid.Column="1" Grid.Row="9" TextWrapping="NoWrap" HorizontalAlignment="Left"></TextBlock>
                    </Grid>
                   </StackPanel>
                </Expander.Content>
            </Expander>
 </StackPanel>

我的样式表是这样的:

<UserControl.Resources >
        <!-- Main Expander Header Brushes -->
        <SolidColorBrush x:Key="MainExpanderHeaderBackgroundBrush" Color="#FF3771C1"/>
        <SolidColorBrush x:Key="MainExpanderHeaderBorderBrush" Color="Black"/>

        <!-- Main Expander Content Brushes -->
        <SolidColorBrush x:Key="MainExpanderContentBorderBrush" Color="Black" />

        <!-- Main Expander Control Brushes (affect the whole control, not just header or content -->
        <SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="White" />
        <SolidColorBrush x:Key="MainExpanderControlDisabledForegroundBrush" Color="DarkGray" />
        <SolidColorBrush x:Key="MainExpanderControlDisabledBackgroundBrush" Color="LightGray" />
        <SolidColorBrush x:Key="MainExpanderControlDisabledBorderBrush" Color="LightGray" />

        <!-- Main Expander Toggle Button Brushes -->
        <SolidColorBrush x:Key="ExpanderToggleButtonBackgroundBrush" Color="White" />
        <SolidColorBrush x:Key="ExpanderToggleButtonMouseOverFillBrush" Color="Green" />
        <SolidColorBrush x:Key="ExpanderToggleButtonPressedFillBrush" Color="Yellow" />

        <!-- Expander Toggle Button Template -->
        <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">

            <!-- Note, the chevron toggle button gets its forground color from the templated parent.
             The parent must set this to a valid color when it is disabled. -->

            <Path 
            Name="Chevron"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Data="M 0 0 L 10 10 L 20 0 Z"
            Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}"
            />

            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Setter TargetName="Chevron" Property="Data" Value="M 0 10 L 10 0 L 20 10 Z" />
                </Trigger>
                <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                    <Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonMouseOverFillBrush}" />
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="Chevron" Property="Fill" Value="{StaticResource ExpanderToggleButtonPressedFillBrush}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style x:Key="MainViewExpander" TargetType="Expander">
            <Setter Property="Foreground" Value="{StaticResource MainExpanderControlNormalForegroundBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Expander">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Name="ContentRow"/>
                            </Grid.RowDefinitions>
                            <Border 
                                Name="HeaderBorder" 
                                Grid.Row="0" 
                                BorderThickness="1" 
                                CornerRadius="0,0,0,0" 
                                BorderBrush="{StaticResource MainExpanderHeaderBorderBrush}"
                                Background="{StaticResource MainExpanderHeaderBackgroundBrush}"
                                >

                                <Grid >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="20" />
                                    </Grid.ColumnDefinitions>

                                    <ContentPresenter 
                                        Grid.Column="0"
                                        Margin="4" 
                                        ContentSource="Header" 
                                        RecognizesAccessKey="True" 
                                        />
                                    <ToggleButton 
                                        Grid.Column="1"
                                        IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        OverridesDefaultStyle="True" 
                                        Template="{StaticResource ExpanderToggleButton}" 
                                        Background="{StaticResource ExpanderToggleButtonBackgroundBrush}" 
                                        />
                                </Grid>
                            </Border>

                            <Border 
                                Name="ContentBorder" 
                                Grid.Row="1" 
                                BorderBrush="{StaticResource MainExpanderContentBorderBrush}" 
                                BorderThickness="1,0,1,1" 
                                CornerRadius="0,0,0,0" 
                                >
                                <ContentPresenter Margin="4" />

                            </Border>
                        </Grid>

                        <!-- Triggers for the entire Expander Control -->
                        <ControlTemplate.Triggers>

                            <Trigger Property="IsExpanded" Value="True">
                                <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content, Path=DesiredHeight}" />
                            </Trigger>

                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Foreground" Value="{StaticResource MainExpanderControlDisabledForegroundBrush}"/>
                                <Setter TargetName="HeaderBorder" Property="Background" Value="{StaticResource MainExpanderControlDisabledBackgroundBrush}" />
                                <Setter TargetName="HeaderBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
                                <Setter TargetName="ContentBorder" Property="BorderBrush" Value="{StaticResource MainExpanderControlDisabledBorderBrush}" />
                            </Trigger>

                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" 
                            Foreground="{StaticResource MainExpanderControlNormalForegroundBrush}" 
                            FontSize="18" 
                            FontWeight="Bold"
                            />
                    </DataTemplate>
                </Setter.Value>
            </Setter>

        </Style>

        <Style x:Key="MainViewExpanderCommands" 
           BasedOn="{StaticResource MainViewExpander}"  
           TargetType="Expander"
           >
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </UserControl.Resources >

那么如何在扩展器中获取网格数据?

1 个答案:

答案 0 :(得分:1)

有三个问题

  1. MainExpanderControlNormalForegroundBrushWhite,因此在展开器内容区域中看不到任何内容。将其更改为黑色,如下所示。

    <SolidColorBrush x:Key="MainExpanderControlNormalForegroundBrush" Color="Black" />
    
  2. 在其中一个触发器中,您绑定的名称为Content的元素不存在。您应该绑定到ContentBorder,如下所示。

    <Trigger Property="IsExpanded" Value="True">
        <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=ContentBorder, Path=DesiredHeight}" />
    </Trigger>
    
  3. ContentRow高度设置为0以启用扩展器功能。

    <RowDefinition Name="ContentRow" Height="0"/>