2016-07-21 3 views
0

私は普遍的なアプリケーションやXAMLには比較的新しいので、メインページにスタイルを適用しようとしています。これまでのところ、ListBoxItemのスタイルを正しく定義しましたが、アイテムが選択されたときに背景の塗りつぶしの色を変更する方法が見つかりません。ListBoxItemが選択されている場合、どのようにプロパティを変更できますか?

WPFでは、イベントがトリガされたときにトリガを設定してアイテムのプロパティを変更するのは非常に簡単ですが、ユニバーサルアプリケーションではトリガは使用できません。

私の目標は、ListBoxItemの背景プロパティをGrayに設定することですが、これを達成する方法が見つけられません。私はVisualStateManagerを使ってみましたが、どのように動作するのか分かりませんし、まだ動作しているVisual状態を何かに適用していません。

誰でもVisualStatesの使い方を説明できますか、これを行うための別の方法を提案することはできますか?ここに私のコードは、参考のために、これまでです:ここでは

<Application 
    x:Class="VSC_QC1.App" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:VSC_QC1" 
    RequestedTheme="Light"> 
    <Application.Resources> 
     <Style x:Key="ListBoxStyle" TargetType="ListBox"> 
      <Setter Property="FontFamily" Value="Tahoma"/> 
      <Setter Property="FontWeight" Value="Bold"/> 
      <Setter Property="Foreground" Value="White"/> 
      <Setter Property="HorizontalAlignment" Value="Center"/> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
      <Setter Property="BorderBrush" Value="Black" /> 
      <Setter Property="BorderThickness" Value="2" /> 
     </Style> 
     <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem"> 
      <Setter Property="Background"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#00b300" Offset="0" /> 
         <GradientStop Color="#107028" Offset="1" /> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Application.Resources> 
</Application> 

は、コントロールテンプレートと(MainPage.xamlをで)ListBoxコントロール自体の私のコードは次のとおりです。

 <ListBox 
     x:Name="LightSelector" 
     Grid.Column="2" 
     Grid.Row="0" 
     Width="300" 
     Style="{StaticResource ListBoxStyle}" 
     FontSize="30" Background="#FFC8C8C8" 
     VerticalAlignment="Top" 
     HorizontalAlignment="Center" 
     SelectionChanged="LightSelector_SelectionChanged"> 
     <ListBox.ItemContainerStyle> 
      <Style TargetType="ListBoxItem"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ListViewItem"> 
          <ListViewItemPresenter   
           PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"  
           SelectedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"  
           SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
           PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
           SelectedPressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" /> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ListBox.ItemContainerStyle> 
     <ListBoxItem>White flood</ListBoxItem> 
     <ListBoxItem>UV flood</ListBoxItem> 
     <ListBoxItem>IR flood</ListBoxItem> 
     <ListBoxItem>White oblique</ListBoxItem> 
     <ListBoxItem>IR oblique</ListBoxItem> 
     <ListBoxItem>Coaxial</ListBoxItem> 
     <ListBoxItem>Backlight panel</ListBoxItem> 
    </ListBox> 

答えて

0
<page> 

<Page.Resources> 
     <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem"> 
      <Setter Property="Background" Value="Transparent"/> 
      <Setter Property="TabNavigation" Value="Local"/> 
      <Setter Property="Padding" Value="12,11,12,13"/> 
      <Setter Property="HorizontalContentAlignment" Value="Left"/> 
      <Setter Property="UseSystemFocusVisuals" Value="True"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ListBoxItem"> 
         <Grid x:Name="LayoutRoot" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> 
          <Grid.Resources> 
           <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter"> 
            <Setter Property="FontFamily" Value="Segoe UI"/> 
            <Setter Property="FontWeight" Value="SemiBold"/> 
            <Setter Property="FontSize" Value="15"/> 
            <Setter Property="TextWrapping" Value="Wrap"/> 
            <Setter Property="LineStackingStrategy" Value="MaxHeight"/> 
            <Setter Property="TextLineBounds" Value="Full"/> 
            <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/> 
           </Style> 
           <Style x:Key="BodyContentPresenterStyle" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter"> 
            <Setter Property="FontWeight" Value="Normal"/> 
            <Setter Property="FontSize" Value="15"/> 
           </Style> 
          </Grid.Resources> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Selected"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="SelectedUnfocused"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="SelectedPointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="SelectedPressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PressedBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Rectangle x:Name="PressedBackground" Fill="Transparent" Control.IsTemplateFocusTarget="True"/> 
          <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <ListBox 
     x:Name="LightSelector" 
     Grid.Column="2" 
     Grid.Row="0" 
     Width="300" 
     FontSize="30" Background="#FFC8C8C8" 
     VerticalAlignment="Top" 
     HorizontalAlignment="Center" 
     > 



      <ListBoxItem>White flood</ListBoxItem> 
      <ListBoxItem>UV flood</ListBoxItem> 
      <ListBoxItem>IR flood</ListBoxItem> 
      <ListBoxItem Style="{StaticResource ListBoxItemStyle1}">White oblique</ListBoxItem> 
      <ListBoxItem>IR oblique</ListBoxItem> 
      <ListBoxItem>Coaxial</ListBoxItem> 
      <ListBoxItem>Backlight panel</ListBoxItem> 

     </ListBox> 
    </Grid> 
</page> 

に従うだけで、リストボックスdefiene.Iがちょうど白斜めにスタイルをPURページ内のコードを置きます。必要な場所を提供することができます。

+0

だから、私は視覚的な状態でデフォルトのテンプレートを使い、ちょうどフィットするように調整したいのですか? –

+0

これはうまくいきました。白い斜線が選択されるとグレーになりますが、他のすべてはデフォルトの紫色になります –

+0

これも知っていると便利ですhttp://stackoverflow.com/questions/19320208/change-background-color-of選択された項目のリストボックス?noredirect = 1&lq = 1 –

1

こんにちはただ、アプリでこのコードを置きます。 XAML、

**<SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="Gray" />** 

あなたは、リストボックスの項目の色がゲイリーに変更されますその時リストボックスで任意の項目を選択しました。

+0

"タイプ 'アプリケーション'は直接コンテンツをサポートしていません。 –

+0

これでプロパティリソースは一度しか設定できないことを私に伝えています –

0
<Application.Resources> 

     <ResourceDictionary> 

       <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="Gray" /> 

     </ResourceDictionary> 


     </Application.Resources> 
app.xamlで

使用このコードをしても、このリンクに Change background color of selected item in listbox

+0

コードを入力してください。 –

+0

私が知っている限り質問 –

+0

に追加されたスクリーンショットを参照してください。私はプロパティ 'リソース'を1回だけ設定しました –

関連する問題