WPF扩展面板在Canvas中无法向左展开

Question

我有一个包含4列的网格。第一列中有一个ZIndex为99的Canvas，其中包含一个可展开内容。展开方向设置为RIGHT。当我点击标题时，可展开内容将超过第2列…这正是我想要的。我正在尝试在第4列内复制此操作（只是相反的方向），以便展开时它将显示在第3列上方。即使我将第二个可展开内容的ExpandDirection标记为“Left”，它仍会向右扩展并超出屏幕。

以下是有效的可展开内容：

<Canvas Grid.Column="0" Panel.ZIndex="99" Grid.RowSpan="4" VerticalAlignment="Stretch" Margin="0,5"> 
    <Expander ExpandDirection="Right" Style="{DynamicResource OptionsExpanderStyle}" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
        <Border BorderBrush="Black" BorderThickness="0,0,2,0">
            <Grid Background="White">

            </Grid>
        </Border>
    </Expander>
</Canvas>

以下是损坏的扩展器:

<Canvas x:Name="rightCanvas" Panel.ZIndex="99" Grid.RowSpan="4" Grid.Column="3" Margin="0,5">
    <Expander ExpandDirection="Left" Style="{DynamicResource OptionsExpanderStyle}" HorizontalAlignment="Right" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
        <Border BorderBrush="Black" BorderThickness="2,0,0,0">
            <Grid Background="White" Width="150">

            </Grid>
        </Border>
    </Expander>
</Canvas>

- Thelonias

---

@NicolasRepiquet，这是我找到的唯一一种方法，可以使我扩展到列2和3中的其他控件之上。还有其他方法可以做到这一点吗？仅仅将可扩展器的ZIndex设置得很高并不能起作用。 - Thelonias

Answer 1

不要使用画布（canvas）。

可以尝试以下方法：

<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Background="LightBlue"
            TextAlignment="Center" Text="Left Column"/>
        <TextBlock Grid.Column="1" Background="LightCoral" 
            TextAlignment="Center" Text="Right Column"/>
    </Grid>
    <Expander Background="LightGray" ExpandDirection="Right"
        Header="LeftMenu" VerticalAlignment="Top" HorizontalAlignment="Left">
        <StackPanel Width="200">
            <TextBlock Text="Some menu stuff"/>
            <TextBlock Text="Some more"/>
        </StackPanel>   
    </Expander>
    <Expander Background="LightGray" ExpandDirection="Left"
        Header="RightMenu" VerticalAlignment="Top" HorizontalAlignment="Right">
        <StackPanel Width="200" >
            <TextBlock Text="Some menu stuff"/>
            <TextBlock Text="Some more"/>
        </StackPanel>
    </Expander>
</Grid>

- Nicolas Repiquet

---

我同意。Expander 正确地扩展，但会在父级->画布内移动自身。 - denis morozov

你真的应该把所有那些画布都清除掉 :D - Nicolas Repiquet

有人可以解释一下为什么我不应该使用canvas吗（除了它对我没有用之外）？我正在实施上面的答案，但我只是好奇为什么有人说我不应该使用canvas。 - Thelonias

来自WinForms或其他绝对定位UI框架的人们喜欢使用画布，并经常使用它。这通常会导致布局混乱和困惑。应该谨慎地使用画布，只有在确实需要绝对定位功能时才使用。大多数情况下，有一种不错的方法可以避免使用它。 - Nicolas Repiquet

@NicolasRepiquet，感谢你的回答。是的，我从来没有使用过Canvas，但在这种情况下它起作用了（或者至少有一半的效果）。不过你的解决方案更好。谢谢！ - Thelonias

@Nicolas Repiquet：我也遇到了同样的问题，这是一个好的解决方案，但是这样做，我怎么能把扩展器放到特定的位置，比如网格的某一列？ - mahboub_mo