วิธีการควบคุมการซ้อนทับเหนือการควบคุมอื่น ๆ ทั้งหมด?


166

ฉันต้องทำให้ตัวควบคุมปรากฏเหนือตัวควบคุมอื่น ๆ ทั้งหมดดังนั้นจึงจะมีการซ้อนทับบางส่วน

คำตอบ:


162

หากคุณกำลังใช้Canvasหรือในรูปแบบของคุณให้การควบคุมที่จะใส่ที่ด้านบนที่สูงGridZIndex

จากMSDN :

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="ZIndex Sample">
  <Canvas>
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" Fill="blue"/>
    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="150" Canvas.Left="150" Fill="yellow"/>
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="200" Canvas.Left="200" Fill="green"/>

    <!-- Reverse the order to illustrate z-index property -->

    <Rectangle Canvas.ZIndex="1" Width="100" Height="100" Canvas.Top="300" Canvas.Left="200" Fill="green"/>
    <Rectangle Canvas.ZIndex="3" Width="100" Height="100" Canvas.Top="350" Canvas.Left="150" Fill="yellow"/>
    <Rectangle Canvas.ZIndex="2" Width="100" Height="100" Canvas.Top="400" Canvas.Left="100" Fill="blue"/>
  </Canvas>
</Page>

หากคุณไม่ได้ระบุZIndexเด็ก ๆ ของแผงจะแสดงผลในลำดับที่พวกเขามีการระบุ (เช่นคนที่อยู่ด้านบน)

หากคุณกำลังมองหาที่จะทำสิ่งที่ซับซ้อนมากขึ้นคุณสามารถดูวิธีChildWindowการใช้งานใน Silverlight มันซ้อนทับพื้นหลังกึ่งโปร่งใสและป๊อปอัปทั่วทั้งRootVisualคุณ


หมายเหตุ: นี่ไม่เหมือนกับผ้าใบ HTML อย่างที่ฉันคาดไว้ มันไม่ได้มีไว้สำหรับการวาดภาพโดยตรง แต่ให้บริบทการวางตำแหน่งที่แน่นอน (โดยปกติคุณจะต้องใส่รูปร่างโดยตรง)
พอล

73

Robert Rossneyมีทางออกที่ดี นี่เป็นทางเลือกทางเลือกที่ฉันเคยใช้ในอดีตที่แยก "โอเวอร์เลย์" ออกจากเนื้อหาที่เหลือ โซลูชันนี้ใช้ประโยชน์จากคุณสมบัติที่แนบมาPanel.ZIndexเพื่อวาง "โอเวอร์เลย์" ไว้เหนือสิ่งอื่นใด คุณสามารถตั้งค่าการแสดงของ "ซ้อนทับ" DataTriggerในรหัสหรือการใช้งาน

<Grid x:Name="LayoutRoot">

 <Grid x:Name="Overlay" Panel.ZIndex="1000" Visibility="Collapsed">
    <Grid.Background>
      <SolidColorBrush Color="Black" Opacity=".5"/>
    </Grid.Background>

    <!-- Add controls as needed -->
  </Grid>

  <!-- Use whatever layout you need -->
  <ContentControl x:Name="MainContent" />

</Grid>

โฆษณาซ้อนทับนี้จะครอบคลุมทั้งหน้าต่างไม่ใช่เฉพาะในบางพื้นที่
Metro Smurf

ทางออกที่ดีที่สุด! ขอบคุณ!
นักพัฒนา

สิ่งที่ฉันต้องการในการวาง "หน้าจอความเป็นส่วนตัว" ไว้เหนือหน้าต่างแอพทั้งหมดของฉัน (เช่นเพื่อซ่อนข้อมูลที่ละเอียดอ่อนหากผู้ใช้เดินออกจากโต๊ะของเขา) ด้วยรหัสน้อยมาก ! น่ากลัว
Whitzz

39

การควบคุมในเซลล์เดียวกันของกริดจะถูกแสดงผลกลับไปด้านหน้า วิธีง่ายๆในการวางตัวควบคุมหนึ่งไว้บนอีกตัวหนึ่งคือวางไว้ในเซลล์เดียวกัน

นี่คือตัวอย่างที่มีประโยชน์ซึ่งจะแสดงแผงที่ปิดการใช้งานทุกอย่างในมุมมอง (เช่นการควบคุมผู้ใช้) ด้วยข้อความไม่ว่างในขณะที่งานที่ดำเนินการมานานกำลังดำเนินการ (เช่นในขณะที่BusyMessageคุณสมบัติที่ถูกผูกไว้ไม่เป็นโมฆะ):

<Grid>

    <local:MyUserControl DataContext="{Binding}"/>

    <Grid>
        <Grid.Style>
            <Style TargetType="Grid">
                <Setter Property="Visibility"
                        Value="Visible" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding BusyMessage}"
                                 Value="{x:Null}">
                        <Setter Property="Visibility"
                                Value="Collapsed" />
                    </DataTrigger>

                </Style.Triggers>
            </Style>
        </Grid.Style>
        <Border HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Background="DarkGray"
                Opacity=".7" />
        <Border HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="White"
                Padding="20"
                BorderBrush="Orange"
                BorderThickness="4">
            <TextBlock Text="{Binding BusyMessage}" />
        </Border>
    </Grid>
</Grid>

23

วางส่วนควบคุมที่คุณต้องการนำมาไว้ที่ส่วนท้ายของรหัส xaml ของคุณ กล่าวคือ

<Grid>
  <TabControl ...>
  </TabControl>
  <Button Content="ALways on top of TabControl Button"/>
</Grid>

13

นี่เป็นฟังก์ชั่นทั่วไปของAdornersใน WPF โดยทั่วไปแล้วผู้ประดับจะปรากฏอยู่เหนือส่วนควบคุมอื่น ๆ ทั้งหมด แต่คำตอบอื่น ๆ ที่กล่าวถึงคำสั่งซื้อ z อาจเหมาะกับกรณีของคุณได้ดีกว่า


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.