2

ListBox選択の背景のスタイル設定に問題があります。私は元々ListViewを使用していましたが、スタイルの問題はそれほどありませんでしたが、これをSilverlightアプリに移動すると、ListViewがないことがわかったので、ListBoxを使用しました。

アプリをSilverlightとWindowsPhoneに簡単に移植したいので、ListBoxを使用しましたが、スタイルに問題があります。

私のMetroアプリにはダークテーマがあり、カスタムListBoxItemがありますが、それをクリックしたときになぜこのように見えるのかわかりません ここに画像の説明を入力してください

もともとListViewを使用すると、次のようになります。 ここに画像の説明を入力してください

カスタムItemsTemplateに背景色を追加すると、このようになります ここに画像の説明を入力してください

その白い背景を取り除くにはどうすればよいですか？また、このように見えるので、ホバーしたときにアイテムのスタイルを変更します ここに画像の説明を入力してください ここに画像の説明を入力してください

これまでのリストボックス用の私のXAML

<ListBox Grid.Row="3" Name="lvSubmeters" VerticalAlignment="Top" HorizontalAlignment="Stretch" SelectedItem="{Binding Path=SelectedListViewItem, Mode=TwoWay}" SelectedIndex="{Binding Path=SelectedListViewIndex, Mode=TwoWay}"  ItemTemplate="{StaticResource SubmeterItems}" ItemsSource="{Binding Path=Store.AllItems}" Background="{x:Null}" Foreground="White">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Margin" Value="0" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

また、カスタムItemsTemplateが必要な場合

<DataTemplate x:Name="SubmeterItems">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="5,5,5,5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="166"/>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="200"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" VerticalAlignment="Top">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding MeterID}" FontSize="24"  FontWeight="Bold" Foreground="#FF429AA3" />
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding Fullname}" FontSize="16"  />
        </StackPanel>
        <StackPanel Grid.Column="1" VerticalAlignment="Top" Height="95">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text=" " FontSize="24"  FontWeight="Bold" Foreground="#FF429AA3" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="29*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0">
                    <TextBlock Grid.Column="0" VerticalAlignment="Top" Text="Last Reading:" FontSize="14" Margin="0,0,5,5"  />
                    <TextBlock Grid.Column="0" VerticalAlignment="Top" Text="New Reading:" FontSize="14" Margin="0,0,5,5"  />
                    <TextBlock Grid.Column="0" VerticalAlignment="Top" Text="KW/H Used:" FontSize="14" Margin="0,0,5,5"  />
                </StackPanel>
                <StackPanel Grid.Column="1">
                    <TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding LastReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  />
                    <TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding NewReading}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  />
                    <TextBlock Grid.Column="1" VerticalAlignment="Top" Text="{Binding KwHUsed}" FontSize="14" Margin="0,0,5,5" FontWeight="Bold"  />
                </StackPanel>
            </Grid>
        </StackPanel>

        <StackPanel Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="Black">
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding KwhUsedAmount}" FontSize="20"  FontWeight="Bold" Foreground="Red" TextAlignment="Right" Margin="0,0,5,0" />
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="+" FontSize="20" Foreground="#99FF0000" TextAlignment="Right"  Margin="0,0,5,0"/>
                <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding AdditionalCharges}" FontSize="20" Foreground="#99FF0000" TextAlignment="Right"  Margin="0,0,5,0"/>
            </StackPanel>
            <TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Top" Text="{Binding TotalAmount}" FontSize="34" FontWeight="Bold" Foreground="Green" TextAlignment="Right"  Margin="0,0,5,0" />
        </StackPanel>
    </Grid>
</DataTemplate>

これをBlend4に持っていこうとしましたが、その方法が見つかりません。

4

1 に答える 1

1

上からのスクリーンショットは、提供したXAMLと完全には一致していないように見えますが、質問には答えられると思います。

  1. 各アイテムの周囲の白い境界線の場合-アイテムが選択されたときに境界線が紫色に変わる方法から、それがItemContainerの一部であることがわかります（これが選択されるためです）。ItemContainerには、各ListBoxItemのコンテンツが含まれます。コンテンツは、DataTemple（またはItemTemplateプロパティ）を使用してレンダリングされます。DataTemplateでは、最上部のグリッドの周囲に5のマージンがあります。つまり、コンテンツがそのDataTemplateを使用してレンダリングされる場合、コンテンツの外側の周囲にマージンがあります。それはあなたが各アイテムの周りの白い境界線で得ているもののようです、それで私はそれが起こっていることをかなり確信しています。DataTemplateの一番上のグリッドの余白を取り除くと、白い境界線がなくなります。これが正しくない場合は、

  2. ListBoxItemの色/スタイルの変更は非常に簡単で、いくつかの方法があります。（私の意見では）最も簡単な方法は、MouseOverの背景色を調整するトリガーをItemContainerStyleに追加することです。これは、既存のItemContainerStyleを拡張する簡単な例です（必要に応じて、トリガーをさらに高度にすることができます）。

    <ListBox.ItemContainerStyle>
  <Style TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Margin" Value="5" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Green"/>
        </Trigger>
    </Style.Triggers>
  </Style>
</ListBox.ItemContainerStyle>

お役に立てば幸いです。

于 2012-06-25T16:47:12.857 に答える