จัดเรียงรายการในแผงสแต็ค?

ฉันสงสัยว่าฉันสามารถมีตัวควบคุม 2 ตัวใน StackPanel ในแนวนอนหรือไม่เพื่อให้รายการที่เหมาะสมเชื่อมต่อไปทางด้านขวาของ StackPanel

ฉันลองสิ่งต่อไปนี้ แต่มันไม่ทำงาน:

<StackPanel Orientation="Horizontal">
    <TextBlock>Left</TextBlock>
    <Button Width="30" HorizontalAlignment="Right">Right<Button>
</StackPanel>

ในตัวอย่างด้านบนฉันต้องการให้ปุ่มเชื่อมต่อไปทางด้านขวาของ StackPanel

หมายเหตุ: ฉันต้องการให้ใช้ StackPanel ไม่ใช่ Grid เป็นต้น

คุณสามารถทำสิ่งนี้ได้ด้วยDockPanel:

<DockPanel Width="300">
    <TextBlock>Left</TextBlock>
    <Button HorizontalAlignment="Right">Right</Button>
</DockPanel>

ความแตกต่างคือการที่StackPanelจะจัดองค์ประกอบของเด็กเป็นบรรทัดเดียว (ทั้งแนวตั้งหรือแนวนอน) ในขณะที่DockPanelกำหนดพื้นที่ที่คุณสามารถจัดเรียงองค์ประกอบของเด็กทั้งแนวนอนหรือแนวตั้งเมื่อเทียบกับแต่ละอื่น ๆ ( Dockคุณสมบัติเปลี่ยนตำแหน่งขององค์ประกอบที่เกี่ยวข้อง องค์ประกอบภายในคอนเทนเนอร์เดียวกันคุณสมบัติการจัดตำแหน่งเช่นHorizontalAlignmentเปลี่ยนตำแหน่งขององค์ประกอบที่สัมพันธ์กับองค์ประกอบหลักของมัน)

ปรับปรุง

เป็นแหลมออกในความคิดเห็นที่คุณยังสามารถใช้ทรัพย์สินของFlowDirection StackPanelดู @ D_Bester ของคำตอบ

โย่สามารถตั้งค่าFlowDirectionของStack panelไปRightToLeftแล้วทุกรายการจะจัดชิดไปทางด้านขวา

สำหรับผู้ที่สะดุดเมื่อคำถามนี้นี่เป็นวิธีการเพื่อให้บรรลุรูปแบบนี้กับGrid :

<Grid>
    <TextBlock Text="Server:"/>
    <TextBlock Text="http://127.0.0.1" HorizontalAlignment="Right"/>
</Grid>

สร้าง

Server:                                                                   http://127.0.0.1

ไม่สามารถใช้งาน DockPanel ได้อย่างที่ฉันต้องการและสลับทิศทางการไหลของ StackPanel ลำบาก การใช้กริดไม่ใช่ตัวเลือกเนื่องจากไอเท็มภายในอาจซ่อนอยู่ขณะใช้งานดังนั้นฉันไม่ทราบจำนวนคอลัมน์ทั้งหมดในขณะออกแบบ ทางออกที่ดีที่สุดและง่ายที่สุดที่ฉันสามารถทำได้คือ:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        <!-- Right aligned controls go here -->
    </StackPanel>
</Grid>

สิ่งนี้จะส่งผลให้ตัวควบคุมภายในของ StackPanel ถูกจัดตำแหน่งไปทางด้านขวาของพื้นที่ว่างโดยไม่คำนึงถึงจำนวนของตัวควบคุม - ทั้งที่การออกแบบและรันไทม์ เย้! :)

มันทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน เพียงแค่วางปุ่มก่อนเพราะคุณเริ่มจากด้านขวา หาก FlowDirection กลายเป็นปัญหาเพียงเพิ่ม StackPanel รอบ ๆ มันและระบุ FlowDirection = "LeftToRight" สำหรับส่วนนั้น หรือเพียงแค่ระบุ FlowDirection = "LeftToRight" สำหรับการควบคุมที่เกี่ยวข้อง

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
    <Button Width="40" HorizontalAlignment="Right" Margin="3">Right</Button>
    <TextBlock Margin="5">Left</TextBlock>
    <StackPanel FlowDirection="LeftToRight">
        <my:DatePicker Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" />    
    </StackPanel>
    <my:DatePicker FlowDirection="LeftToRight" Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" />    
</StackPanel>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>

สำหรับ windows 10 ให้ใช้ relativePanel แทน stack panel และใช้

relativepanel.alignrightwithpanel = "true"

สำหรับองค์ประกอบที่มีอยู่

หากคุณกำลังมีปัญหาเช่นเดียวกับที่ฉันมีที่ป้ายอยู่กึ่งกลางในแผงสแต็คแนวตั้งของฉันให้แน่ใจว่าคุณใช้การควบคุมความกว้างเต็ม ลบคุณสมบัติความกว้างหรือวางปุ่มของคุณในคอนเทนเนอร์เต็มความกว้างที่อนุญาตให้จัดแนวภายใน WPF เกี่ยวกับการใช้คอนเทนเนอร์เพื่อควบคุมเลย์เอาต์

<StackPanel Orientation="Vertical">
    <TextBlock>Left</TextBlock>
    <DockPanel>
        <Button HorizontalAlignment="Right">Right</Button>
    </DockPanel>
</StackPanel>

StackPanel แนวตั้งที่มีป้ายกำกับด้านซ้ายตามด้วยปุ่มขวา

ฉันหวังว่านี่จะช่วยได้.

อาจไม่ใช่สิ่งที่คุณต้องการถ้าคุณต้องการหลีกเลี่ยงค่าขนาดฮาร์ดโค้ด แต่บางครั้งฉันใช้ "shim" (ตัวคั่น) สำหรับสิ่งนี้:

<Separator Width="42"></Separator>