0

ユーザーが [その他のエキスパンダー] ボタンをクリックしたときにデータグリッドを拡張する単純なエキスパンダーを持つ WPF ウィンドウを作成しようとしています。ユーザーがデータグリッドを非表示にしたい場合、ユーザーは Less expander ボタンをクリックするだけです。

また、ドック パネルを使用してヘッダー、左、右、フッターを分離しています。

問題は次のとおりです。

  1. ユーザーが拡大ボタンをクリックする前に、縮小ボタンを中央に配置したいと考えています。ユーザーが [more expander] ボタンをクリックすると、[less] ボタンが左に押され、右側にデータグリッドが表示されます。
  2. エキスパンダーを閉じたときと開いたときに、エキスパンダーの名前を変更するにはどうすればよいですか。xaml レベルで実行できますか?

以下は、xaml コードです。

<Window x:Class="M.SalesWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SalesWindow" Height="300" Width="300">
    <DockPanel>

        <StackPanel DockPanel.Dock="Top">
            <Label FontSize="28" Content="Sales">
            </Label>
        </StackPanel>

        <StackPanel DockPanel.Dock="Left" Width="auto" HorizontalAlignment="Center">
            <Label FontSize="15" Content="Enter Amount" Height="26" Width="168" />
            <Separator Width="168" />
        </StackPanel>

        <StackPanel DockPanel.Dock="Right">
            <Expander ExpandDirection="Left" HorizontalAlignment="Right" VerticalAlignment="Stretch">
                <Expander.Header>
                    <TextBlock Text="More">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                    </TextBlock>
                </Expander.Header>
                <Expander.Content>
                    <StackPanel>
                        <DataGrid ItemsSource="{Binding Products}">

                        </DataGrid>
                    </StackPanel>
                </Expander.Content>
            </Expander>
        </StackPanel>

    </DockPanel>
</Window>

ありがとうございました。

4

1 に答える 1

1

コードを以下のコードに置き換えて、魔法を見てください。これにより、要件に応じた位置合わせの問題も解決されます。このコードで同様の結果を得ることができるため、DockPanelを削除しました。

<StackPanel>
    <StackPanel>
        <Label FontSize="28" Content="Sales">
        </Label>
    </StackPanel>

    <Grid>
        <Grid.ColumnDefinitions>                
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" HorizontalAlignment="Center">
            <Label FontSize="15" Content="Enter Amount" Height="26" Width="168" />
            <Separator Width="168" />
        </StackPanel>

         <Expander Grid.Column="1" ExpandDirection="Left" HorizontalAlignment="Right" VerticalAlignment="Stretch">
            <Expander.Style>
                <Style TargetType="Expander">
                    <Setter Property="IsExpanded" Value="False" />
                    <Setter Property="Header">
                        <Setter.Value>
                            <TextBlock Text="Less">
                                <TextBlock.LayoutTransform>
                                    <RotateTransform Angle="-90"/>
                                </TextBlock.LayoutTransform>
                            </TextBlock>
                        </Setter.Value>
                    </Setter>

                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsExpanded,RelativeSource={RelativeSource Self}}" Value="True">
                            <Setter Property="Header">
                                <Setter.Value>
                                    <TextBlock Text="More">
                                        <TextBlock.LayoutTransform>
                                            <RotateTransform Angle="-90"/>
                                        </TextBlock.LayoutTransform>
                                    </TextBlock>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Expander.Style>
            <Expander.Content>
                <StackPanel>
                    <DataGrid ItemsSource="{Binding Products}">

                    </DataGrid>
                </StackPanel>
            </Expander.Content>
        </Expander>

    </Grid>
</StackPanel>

トリックは次のコード行の下にあります。

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
于 2012-09-26T02:22:39.187 に答える