web-dev-qa-db-ja.com

Xamarin.Formsを適用できないListView（選択リップル効果を削除）

記事を表示するカスタムViewCellを含むListViewがあります。ただし、アイテムを選択すると、マテリアルデザインのリップル/選択効果が表示されます。

Ripple effect

Xaml：

   <ListView HasUnevenRows="True" ItemsSource="{Binding NewsArticles}" IsPullToRefreshEnabled="True">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <StackLayout Padding="10">
                <Label Text="{Binding Title}" HorizontalOptions="Center" FontAttributes="Bold" />
                <Image Source="{Binding ImageUrl}" IsVisible="{Binding HasImage}" />
                <Label Text="{Binding Content}"></Label>
              </StackLayout>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>

リップル効果を取り除くにはどうすればよいですか？

c#androidxamllistviewxamarin.forms
24
Trevi Awater

長い時間をかけて考え出した後、カスタムレンダラーを使用してそれを実現できます。ここに方法があります

最初に、no_selector.xmlというファイルを作成し、Resources/layoutsフォルダーに配置します（パッケージプロパティをAndroidResourceに設定する必要があります）。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item Android:state_window_focused="false" Android:drawable="@Android:color/transparent"/>
</selector>

その後、ListViewコンポーネントのカスタムレンダラーを作成し、

[Assembly: ExportRenderer (typeof(ListView), typeof(NoRippleListViewRenderer))]
namespace Your.Own.Namespace
{
    public class NoRippleListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged (e);
            Control.SetSelector (Resource.Layout.no_selector);
        }
    }
}

no_selectorファイルが見つかりません。プロジェクトを再構築してください！

これにより、アプリケーション内のallListViewの波紋が取り除かれることに注意してください。カップルのみをターゲットにする場合は、ExportRenderer属性の最初のタイプを変更できます（これには、ListViewを拡張する別のクラスを作成する必要があります）。

https://Gist.github.com/awatertrevi/d83787dbbf3de6ef0e0a344169d3c2fa

18
Trevi Awater

カスタムレンダラがなくても削除できると思います。

BackgroundColorのStackPanelを灰色に設定したり、リストやページの背景色を設定したりできます。

<ListView HasUnevenRows="True" ItemsSource="{Binding NewsArticles}" IsPullToRefreshEnabled="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="10" BackgroundColor="Gray">
                    <!-- ... --> 
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

または、Androidスタイルを使用して、リストビューのスタイルを変更できます。

AndroidManifest.xmlにテーマを設定します

<application Android:label="$safeprojectname$" Android:theme="@style/myTheme"></application>

styles.xmlでテーマを作成

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="myTheme" parent="@Android:style/Theme.Material.Light">
        <item name="Android:listViewStyle">@style/ListViewStyle.Light</item>
    </style>

    <style name="ListViewStyle.Light" parent="@Android:style/Widget.ListView">
        <item name="Android:listSelector">@Android:color/transparent</item>
    </style>
</resources>
2
Sven-Michael Stübe