在XamarinForms應用程式中設定ListView的z-index

我在我的 Xamarin Forms 5 應用程式中實作了我自己版本的自動完成功能，我在其中顯示對用戶在ListView.

我遇到的問題是我不想在表單ListView中下推后續Entry控制元件。相反，我希望在ListView他們之上。有沒有辦法設定ListView.

<Entry
   Text="{Binding SearchText}"
   Placeholder="Position you're applying for e.g. Director of Marketing"/>

<ListView
   ItemsSource="{Binding Suggestions}"
   IsVisible="{Binding ShowSuggestions}">
   <ListView.ItemTemplate>
      <DataTemplate>
          <TextCell Text="{Binding PositionName}"/>
      </DataTemplate>
   </ListView.ItemTemplate>
</ListView>

<Entry
   Text="{Binding Salary}"
   Placeholder="Desired salary"/>

在此示例中，我不希望Entry在用戶獲得建議時將“薪水”框向下推。

PS我有這個頁面的視圖模型，所以如果可以的話，我想處理視圖模型中的事情，而不是頁面背后代碼中的事件。

uj5u.com熱心網友回復：

當用戶得到建議時，我不希望“薪水”輸入框被按下。

是的，您可以使用來實作此功能，并將第二行grid的高度設定RowDefinition為。*

請參考xaml代碼：

        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="*" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>

        <Entry  Text="{Binding SearchText}"  Placeholder="Position you're applying for e.g. Director of Marketing"/>

   <ListView Grid.Row="1"
      ItemsSource="{Binding Suggestions}"
      IsVisible="{Binding ShowSuggestions}">
     <ListView.ItemTemplate>
        <DataTemplate>
          <TextCell Text="{Binding PositionName}"/>
        </DataTemplate>
     </ListView.ItemTemplate>
   </ListView>


        <Entry Text="{Binding Salary}"  Placeholder="Desired salary" Grid.Row="2"/>
    </Grid>

uj5u.com熱心網友回復：

您可以使用 RelativeLayout 來實作所需的結果：

<RelativeLayout x:Name="mainLayout">
        <Entry
            x:Name="searchEntry"
            Text="{Binding SearchText}"
            Placeholder="Position you're applying for e.g. Director of Marketing"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1.0}"
            Focused="SearchEntry_Focused"
            Unfocused="SearchEntry_Unfocused"/>

        <Frame 
            x:Name="searchList"
            Padding="0"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1.0}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=searchEntry, Property=X}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=searchEntry, Property=Y, Constant=50}">
            <ListView
                ItemsSource="{Binding Suggestions}"
                IsVisible="{Binding ShowSuggestions}"
                ItemTapped="ListView_ItemTapped">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextCell Text="{Binding PositionName}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Frame>

        <Entry
            Text="{Binding Salary}"
            Placeholder="Desired salary"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1.0}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=searchEntry, Property=X}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=searchEntry, Property=Y, Constant=50}"/>
    </RelativeLayout>

元素使用約束相互鏈接。請閱讀RelativeLayout 檔案以獲取更多資訊。我已經使用 Frame 包裝了 ListView 以進行樣式設定，您還可以與 Entry 組合在一起以使其成為可重用的組件。

在您的顯示/隱藏邏輯（Focused/Unfocused/ItemTapped 或其他）中，您需要呼叫：

mainLayout.RaiseChild(searchList); // so list gets on top of other elements.
mainLayout.LowerChild(searchList); // list goes behind so you can interact with other elements again.

PS來自RelativeLayout檔案：

盡可能避免使用 RelativeLayout。這將導致 CPU 必須執行更多的作業。

使用相對值的 RelativeLayout 可以定位和調整子級的大小，以使它們不適合布局的范圍。

所以謹慎使用！

uj5u.com熱心網友回復：

ADataTrigger可以與Layout.RaiseChild/ Layout.LowerChildin a一起使用TriggerAction，分別將布局子級發送到視覺堆疊的前面或后面：

xmlns:ta="clr-namespace:My.TriggerActions;assembly=..."
...
<Entry ...
  <Entry.Triggers>
    <DataTrigger TargetType="Entry"
                 Binding="{Binding Source={x:Reference MyListView}, Path=IsVisible}"
                 Value="True">
      <DataTrigger.EnterActions>
        <ta:RaiseTriggerAction />
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
        <ta:LowerTriggerAction />
      </DataTrigger.ExitActions>
    </DataTrigger>
  </Entry.Triggers>

觸發動作：

namespace My.TriggerActions
{
  public class RaiseTriggerAction : TriggerAction<View>
  {
    protected override void Invoke(View view)
    {
        var layout = view.Parent as Layout;
        Debug.WriteLineIf(layout != null, GetType().ToString());
        layout?.RaiseChild(view);
    }
  }

  public class LowerTriggerAction : TriggerAction<View>
  {
    protected override void Invoke(View view)
    {
        var layout = view.Parent as Layout;
        Debug.WriteLineIf(layout != null, GetType().ToString());
        layout?.LowerChild(view);
    }
  }
}

標籤：xamarin xamarin.forms

上一篇：如何在Xamarin應用程式中構建傾斜的虛線

下一篇：如何在R的同一個資料庫中將一個字串分成多行？