2016-03-12 3 views
1

У меня странная проблема. Я не уверен, что это ошибка, или если я просто что-то недопонимаю, поскольку я довольно новичок в WPF (возможно, последний).Отрегулируйте выбранный стиль ListViewItem TextBlock

В моем проекте у меня есть ListView, который отображает элементы, аналогичные тем, которые видели в Проводнике Windows, используя значок. Я наметил шаблон управления, который состоит из элемента Image и элемента TextBlock под ним. Моя цель - отрегулировать максимальную высоту TextBlock, когда выбран ListViewItem. Это значит, что имя элемента будет регулироваться от обрезки с помощью многоточия, чтобы показать полное имя элемента.

Когда элемент выбран, однако, вместо того, чтобы регулировать максимальную высоту только выбранного элемента TextBlock, он регулирует все TextBlock с для каждого элемента ли он активно выбран или нет.

Я исследовал для ответа, но не нашел ничего похожего на эту конкретную проблему. Эта ссылка похожа на концепцию, но без моей проблемы.

WPF - ListView Item on Selected change Font size

Некоторые из моих других методов состояли из одного ControlTemplate с триггерами для изменения стиля или ItemContainerStyle вместо явного вида ControlTemplate, что все, казалось, дает один и тот же нежелательный результат.

Как я могу достичь этой функциональности? Возможно ли с ControlTemplate?

Вот некоторые из моих XAML код:

ListView

<ListView x:Name="ItemViewer"> 
    <ListView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel Margin="10"/> 
     </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="{x:Type ListViewItem}"> 
      <Setter Property="Margin" Value="10"/> 
      <Setter Property="Template" Value="{StaticResource ListViewItemNormal}"/> 
      <Style.Triggers> 
       <MultiTrigger> 
        <MultiTrigger.Conditions> 
         <Condition Property="IsSelected" Value="True"/> 
         <Condition Property="Selector.IsSelectionActive" Value="True"/> 
        </MultiTrigger.Conditions> 
        <Setter Property="Template" Value="{StaticResource ListViewItemSelected}"/> 
       </MultiTrigger> 
      </Style.Triggers> 
     </Style> 
    </ListView.ItemContainerStyle> 
</ListView> 

ControlTemplates

<ControlTemplate x:Key="ListViewItemNormal" TargetType="{x:Type ListViewItem}"> 
    <Border x:Name="ItemBoxBorder" Background="Transparent"> 
     <Grid HorizontalAlignment="Left" MinHeight="90" 
       Margin="5" 
       MaxWidth="90" 
       Width="90" 
       x:Name="ItemBox"> 
      <StackPanel> 
       <Image HorizontalAlignment="Center" 
         VerticalAlignment="Top" 
         Source="{StaticResource NewImage}" 
         Width="64" Height="64"/> 
       <TextBlock x:Name="ItemDescription" 
          Text="{Binding Path=Name}" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Bottom" 
          TextWrapping="Wrap" 
          MaxWidth="90" 
          MaxHeight="30" 
          TextTrimming="CharacterEllipsis"/> 
      </StackPanel> 
      <Grid.ToolTip> 
       <ToolTip Content="{Binding Path=Name}"/> 
      </Grid.ToolTip> 
     </Grid> 
    </Border> 
    <ControlTemplate.Triggers> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsSelected" Value="False"/> 
       <Condition Property="IsMouseOver" Value="True"/> 
      </MultiTrigger.Conditions> 
      <Setter TargetName="ItemBoxBorder" Property="Background" Value="{StaticResource HighlightMouseHoverColorBrush}"/> 
     </MultiTrigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

<ControlTemplate x:Key="ListViewItemSelected" TargetType="{x:Type ListViewItem}"> 
    <Border x:Name="ItemBoxBorder" Background="{StaticResource SelectedItemBrush}" 
      BorderBrush="{StaticResource HighlightBorderColorBrush}" 
      BorderThickness="1"> 
     <Grid HorizontalAlignment="Left" MinHeight="90" 
       Margin="5" 
       MaxWidth="90" 
       Width="90" 
       x:Name="ItemBox"> 
      <StackPanel> 
       <Image HorizontalAlignment="Center" 
         VerticalAlignment="Top" 
         Source="{StaticResource NewImage}" 
         Width="64" Height="64"/> 
       <TextBlock x:Name="ItemDescription" 
          Text="{Binding Path=Name}" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Bottom" 
          TextWrapping="Wrap" 
          MaxWidth="90" 
          MaxHeight="125" 
          TextTrimming="CharacterEllipsis"/> 
      </StackPanel> 
      <Grid.ToolTip> 
       <ToolTip Content="{Binding Path=Name}"/> 
      </Grid.ToolTip> 
     </Grid> 
    </Border> 
</ControlTemplate> 

EDIT

Вот пример проблемы с реализацией ms_dos.

This image shows I have the item with a short description selected. This is the height all items should remain if they are not selected.

In this image, you'll see the item with the long description is selected. However, both items extend their height, but only the selected one should grow.

ответ

0

Вам не нужно два отдельных шаблонов элементов управления для этого. Просто возьмите ItemContainerStyle свойство ListView и использовать шаблон управления, как это:

<ListView x:Name="ItemViewer"> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel Margin="10" /> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 

     <ListView.ItemContainerStyle> 
      <Style TargetType="{x:Type ListViewItem}"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ListViewItem"> 
          <Border x:Name="ItemBoxBorder" 
            Background="Green" 
            BorderThickness="1" 
            VerticalAlignment="Top"> 
           <Grid HorizontalAlignment="Left" 
             MinHeight="90" 
             Margin="5" 
             MaxWidth="90" 
             Width="90" 
             x:Name="ItemBox"> 
            <StackPanel> 
             <Image HorizontalAlignment="Center" 
               VerticalAlignment="Top" 
               Width="64" 
               Height="64" /> 
             <TextBlock x:Name="ItemDescription" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Bottom" 
                TextWrapping="Wrap" 
                Text="{Binding}" 
                MaxWidth="90" 
                MaxHeight="125" 
                TextTrimming="CharacterEllipsis" /> 
            </StackPanel> 
            <Grid.ToolTip> 
             <ToolTip Content="{Binding Path=Name}" /> 
            </Grid.ToolTip> 
           </Grid> 
          </Border> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsSelected" 
             Value="true"> 
            <Setter TargetName="ItemBoxBorder" 
              Property="Background" 
              Value="Red" /> 
            <Setter TargetName="ItemDescription" 
              Property="TextElement.FontSize" 
              Value="20" /> 
            <Setter TargetName="ItemBoxBorder" 
              Property="Height" 
              Value="135" /> 
           </Trigger> 
           <Trigger Property="IsSelected" 
             Value="false"> 
            <Setter TargetName="ItemBoxBorder" 
              Property="Height" 
              Value="90" /> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ListView.ItemContainerStyle> 
</ListView> 

Взгляните на раздел ControlTemplate.Triggers. В основном вы используете свойство Trigger, чтобы контролировать, какое свойство должно срабатывать триггеры ... в нашем случае IsSelected из ListView. А с помощью Setter вы определяете свойство и значение для изменения элемента управления ListViewItem. TargetName из Setter относится к x:Name элемента управления, который вы определяете в разделе ControlTemplate.

Надеюсь, этот пример поможет вам с вашей проблемой!

Greets ms_dos

+0

Спасибо за ответ, однако, это не совсем решить мою проблему. Пожалуйста, взгляните на мое редактирование с прилагаемыми фотографиями. С помощью этого кода все элементы по-прежнему растут с выбранными, хотя только выбранный элемент должен иметь увеличенную высоту. –

+0

Хорошо, теперь я вижу, куда вы хотите отправиться! В этом случае просто добавьте еще один 'Trigger' для' IsSelected' со значением 'false'. Также вы должны указать свойство height пограничного элемента управления 'ItemBoxBorder'. Чтобы сохранить элементы, выстроившиеся вверху, я добавил элемент управления VerticalAlignment = "Top" 'в пограничный элемент. Я обновил код в своем ответе. –

+0

Ах! Фу, я никогда бы не подумал об этом! На самом деле, при тестировании, кажется, даже не нужно устанавливать условие для 'IsSelected' как' false'. Пока я устанавливаю 'ItemBoxBorder' с' VerticalAlignment = "Top" ', он ведет себя точно так, как я хотел. Еще раз спасибо! :) –

Смежные вопросы