2017-07-22 66 views
1

我想將控制權與面板的中心對齊,我該怎麼做?使用RelativePanel將面板的中心與右邊對齊

使用列定義不起作用。

RelativePanel error: The name 'MiddleSplitter' does not exist in the current context

<Grid x:Name="LayoutRoot"> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition x:Name="MiddleSplitter"/> <!--get middle?--> 
    </Grid.ColumnDefinitions> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <VisualState.StateTriggers> 
        <StateTrigger IsActive="True"/> <!--just for test--> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 

        <Setter Target="AppListBox.(RelativePanel.AlignRightWith)" Value="MiddleSplitter"/> 

       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <ScrollViewer Grid.ColumnSpan="2"> 
     <RelativePanel Margin="5"> 

      <ListBox Name="AppListBox" Height="150" Margin="5"/> 

     </RelativePanel> 
    </ScrollViewer> 
</Grid> 

使用RelativePanel,它被簡化成只顯示有這個問題(AppListBox),我不想使用其他類型的面板的控制。

回答

2

一個簡單的解決方法是增加一個真正MiddleSplitterRelativePanel內,而不是依靠什麼在它之外。

您可以創建超輕量級Line元素,禁用其命中測試並隱藏它。您需要將RelativePanel.AlignHorizontalCenterWithPanel設置爲True以使其保持在中間位置。我把它叫做MiddleSplitter,所以別忘了從你的ColumnDefinition中刪除這個名字。

<ScrollViewer Grid.ColumnSpan="2"> 
    <RelativePanel Margin="5"> 
     <Line x:Name="MiddleSplitter" IsHitTestVisible="False" Opacity="0" RelativePanel.AlignHorizontalCenterWithPanel="True" /> 

     <ListBox Name="AppListBox" Height="150" Margin="5"/> 
    </RelativePanel> 
</ScrollViewer> 
1

AlignRightWith="name"只有當name控制在RelativePanel以內時才起作用。所以在你的情況下,你不能使用AlignRightWith="MiddleSplitter"

據我瞭解你的代碼,你想有兩個不同列的內容,但你想一次滾動兩列。要做到這一點,你可以按照下面的代碼示例

<ScrollViewer> 
    <Grid x:Name="LayoutRoot"> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 

     <RelativePanel Margin="5" Grid.Column="1"> 
      .... 
     </RelativePanel> 

     <RelativePanel Margin="5" Grid.Column="2"> 
      <TextBlock Text="My Text" Name="AppListBox" Height="150" Margin="5"/> 
      .... 
     </RelativePanel> 
    </Grid> 
</ScrollViewer>