the

the

关注
发信
关注(28)粉丝(399)

与WPF的ListView的面包屑风格

本文介绍了与WPF的ListView的面包屑风格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个ListView的一个简单的痕迹导航栏。下面一个简单的线框的截图，我想在未来的存档的内容：

现在，我已经创建已经有一些code，主要是用的DataTemplates这样做，这实际上工作得很好，但我有一些视觉问题我解决不了：


  • 主要问题涉及项目的不同宽度。中心的一个箭头应该被延长，尾部和头部应该是一个固定的宽度...

  • 的另一个问题是第一个和最后一个项目的视觉风格

下面是实际code：

 ＆LT; ListView控件DockPanel.Dock =左的ItemsSource ={结合}那篇
                了minWidth =300背景=透明了borderThickness =0
                ScrollViewer.Horizo​​ntalScrollBarVisibility =隐藏
                ScrollViewer.VerticalScrollBarVisibility =隐藏利润=8,0,0,0＆GT;                    ＆LT; ListView.ItemsPanel＆GT;
                        ＆LT; ItemsPanelTemplate＆GT;
                            ＆LT; StackPanel的方向=横向＆GT;＆LT; / StackPanel的＆GT;
                        ＆LT; / ItemsPanelTemplate＆GT;
                    ＆LT; /ListView.ItemsPanel>
                    ＆LT; ListView.ItemTemplate＆GT;
                        ＆LT;＆DataTemplate的GT;
                            ＆LT;电网保证金= -  8,0,0,0＆GT;
                                ＆LT;网格和GT;
                                    ＆LT; Grid.ColumnDefinitions＆GT;
                                        ＆LT; ColumnDefinition WIDTH =8/＆GT;
                                        ＆LT; ColumnDefinition WIDTH =自动/＆GT;
                                        ＆LT; ColumnDefinition WIDTH =8/＆GT;
                                    ＆LT; /Grid.ColumnDefinitions>
                                    ＆LT;路径拉伸=填充StrokeLineJoin =圆行程=＃FF000000填充=＃FFC64242数据=F1中号112,144L 104,144L 112,160L​​ 104,176L 112176的Horizo​​ntalAlignment =拉伸HEIGHT =自动 VerticalAlignment =拉伸WIDTH =自动/＆GT;
                                    ＆LT;电网的Horizo​​ntalAlignment =拉伸HEIGHT =自动VerticalAlignment =拉伸WIDTH =自动Grid.Column =1＆GT;
                                        ＆LT;矩形拉伸=填充填充=＃FFC64242的Horizo​​ntalAlignment =拉伸HEIGHT =自动保证金=0.5VerticalAlignment =拉伸WIDTH =自动/＆GT;
                                        ＆LT;路径拉伸=填充StrokeLineJoin =圆行程=＃FF000000数据=F1中号128,144L 160144的Horizo​​ntalAlignment =拉伸HEIGHT =1保证金=0VerticalAlignment =评出的宽度= 自动/＆GT;
                                        ＆LT;路径拉伸=填充StrokeLineJoin =圆行程=＃FF000000数据=F1中号128,176L 160,176的Horizo​​ntalAlignment =拉伸HEIGHT =1保证金=0VerticalAlignment =底部WIDTH = 自动/＆GT;
                                    ＆LT; /网格和GT;
                                    ＆LT;路径拉伸=填充StrokeLineJoin =圆行程=＃FF000000填充=＃FFC64242数据=F1中号168,144L 176,160L​​ 168176HEIGHT =自动VerticalAlignment =中心WIDTH =8 的Horizo​​ntalAlignment =右Grid.Column =2D：LayoutOverrides =GridBox/＆GT;
                                    ＆LT; D​​ockPanel中LastChildFill =真Grid.ColumnSpan =2Grid.Column =1＆GT;
                                        ＆LT;标签DockPanel.Dock =左字号=12CONTENT ={结合内容，FallbackValue =标记名N / A}的Horizo​​ntalAlignment =左Grid.Column =0VerticalAlignment =中心D：LayoutOverrides =高度保证金=8,0/＆GT;
                                        ＆LT;按钮DockPanel.Dock =右CONTENT =X背景=透明字号=12命令={结合RemoveTagBtn}Grid.Column =0WIDTH =13.077D：LayoutOverrides =高度VerticalAlignment =中心保证金=0,0,8,0/＆GT;
                                        ！＆LT;  - ＆LT;边框背景=＃FFf7f7f7BorderBrush =＃FFc9c9c9了borderThickness =1CornerRadius =4的Horizo​​ntalAlignment =左保证金=0,0,0,5.96D：LayoutOverrides = 高度/＆GT; - ＆GT;
                                    ＆LT; / DockPanel中＆GT;
                                ＆LT; /网格和GT;
                            ＆LT; /网格和GT;
                        ＆LT; / DataTemplate中＆GT;
                    ＆LT; /ListView.ItemTemplate>
                ＆LT; /＆的ListView GT;


解决方案

现在，我必须找到一个答案自己在很短的时间，这是我目前的解决方案。此外，如果你不需要列表框的选择功能，你可以用ItemControl交流一下。

这里的code。请注意，我已经注释掉IsSelected触发为ItemStyleContainer ... 

 ＆LT;列表框填充=0DockPanel.Dock =左的ItemsSource ={结合}那篇
                了minWidth =300背景=透明了borderThickness =0
                ScrollViewer.Horizo​​ntalScrollBarVisibility =隐藏
                ScrollViewer.VerticalScrollBarVisibility =隐藏＆GT;
                    ＆LT; ListBox.ItemsPanel＆GT;
                        ＆LT; ItemsPanelTemplate＆GT;
                            ＆LT; StackPanel的保证金=8,0,0,0方向=横向＆GT;＆LT; / StackPanel的＆GT;
                        ＆LT; / ItemsPanelTemplate＆GT;
                    ＆LT; /ListBox.ItemsPanel>
                    ＆LT; ListBox.ItemContainerStyle＆GT;
                        ＆LT;风格的TargetType ={X：输入一个ListBoxItem}＆GT;
                            ＆LT; setter属性=背景VALUE ={DynamicResource LXBarButtonBackgroundNormal}/＆GT;
                            ＆LT; setter属性=BorderBrushVALUE ={DynamicResource LXBarButtonBorderNormal}/＆GT;
                            ＆LT; setter属性=Horizo​​ntalContentAlignmentVALUE ={结合Horizo​​ntalContentAlignment，的RelativeSource = {的RelativeSource AncestorType = {X：类型的ItemsControl}}}/＆GT;
                            ＆LT; setter属性=VerticalContentAlignmentVALUE ={结合VerticalContentAlignment，的RelativeSource = {的RelativeSource AncestorType = {X：类型的ItemsControl}}}/＆GT;
                            ＆LT; setter属性=填充VALUE =0/＆GT;
                            ＆LT; setter属性=SnapsToDevicePixelsVALUE =真/＆GT;
                            ＆LT; setter属性=模板＆GT;
                                ＆LT; Setter.Value＆GT;
                                    ＆LT;的ControlTemplate的TargetType =ListBoxItem的＆GT;                                        ＆LT; D​​ockPanel中LastChildFill =真保证金= -  8,0,0,0＆GT;
                                            ＆LT;路径DockPanel.Dock =左行程={DynamicResource LXBarButtonBorderNormal}填充={DynamicResource LXBarButtonBackgroundNormal}数据=F1中号112,144L 104,144L 112,160L​​ 104,176L 112176拉伸=填充HEIGHT =32 宽度=8/＆GT;
                                            ＆LT;路径DockPanel.Dock =右行程={DynamicResource LXBarButtonBorderNormal}填充={DynamicResource LXBarButtonBackgroundNormal}数据=F1中号168,144L 176,160L​​ 168176拉伸=填充HEIGHT =32WIDTH = 8/＆GT;
                                            ＆LT; BORDER NAME =边框SnapsToDevicePixels ={TemplateBinding SnapsToDevicePixels}后台={TemplateBinding背景}BorderBrush ={TemplateBinding BorderBrush}填充={TemplateBinding填充}了borderThickness =0,1VerticalAlignment =中心＆GT;
                                                      ＆lt;内容presenter /＆GT;
                                                    ＆LT;！ - 
                                                    ＆LT; ControlTemplate.Triggers＆GT;
                                                      ＆LT;触发属性=IsSelectedVALUE =真正的＆GT;
                                                        ＆LT;二传手的TargetName =边框属性=背景
                                                                VALUE =蓝/＆GT;
                                                      ＆LT; /触发＆GT;
                                                      ＆LT;触发属性=IsEnabledVALUE =false的＆GT;
                                                        ＆LT; setter属性=前景
                                                                VALUE =红/＆GT;
                                                      ＆LT; /触发＆GT;
                                                    ＆LT; /ControlTemplate.Triggers>
                                                     - ＆GT;
                                            ＆LT; /边框＆GT;
                                        ＆LT; / DockPanel中＆GT;                                    ＆LT; /控件模板＆GT;
                                ＆LT; /Setter.Value>
                            ＆LT; /二传手＆GT;
                        ＆LT; /样式和GT;
                    ＆LT; /ListBox.ItemContainerStyle>
                    ＆LT; ListBox.ItemTemplate＆GT;
                        ＆LT;＆DataTemplate的GT;
                                    ＆LT; D​​ockPanel中VerticalAlignment =中心HEIGHT =30＆GT;
                                        ＆lt;局部：LXImageButton了borderThickness =0样式={DynamicResource LXBarImageButton}填充=0DockPanel.Dock =右的背景=透明命令={结合RemoveTagBtn}HEIGHT =16WIDTH = 16
                                        NormalImage =/ com.example.Views;组件/资源/图标/按钮/ btnCloseXS_normal.png
                                        ActiveImage =/ com.example.Views;组件/资源/图标/按钮/ btnCloseXS_active.png
                                        HoverImage =/ com.example.Views;组件/资源/图标/按钮/ btnCloseXS_hover.png
                                        pressedImage =/ com.example.Views;组件/资源/图标/按钮/ btnCloseXS_hover.png
                                        DisabledImage =/ com.example.Views;组件/资源/图标/按钮/ btnCloseXS_passive.png
                                         /＆GT;
                                        ＆LT;标签DockPanel.Dock =左字号=12CONTENT ={结合内容，FallbackValue =标记名N / A}VerticalAlignment =中心/＆GT;
                                    ＆LT; / DockPanel中＆GT;
                        ＆LT; / DataTemplate中＆GT;
                    ＆LT; /ListBox.ItemTemplate>
                ＆LT; /列表框＆GT;

I want to create a simple breadcrumb bar with ListView. Following a simple wireframe screenshot what I would like to archive in the future:

Now, I already created already some code, mainly doing it with DataTemplates, which works actually quite well, but I have some visual problems I am not able to solve:

  • Main problem concerns the different width of the items. The center of an "arrow" should be stretched and the tail and head should be a fixed width...
  • The other problem is the visual style of the first and last items

Here's the actual code:

<ListView DockPanel.Dock="Left" ItemsSource="{Binding TagList}"
                MinWidth="300" Background="Transparent" BorderThickness="0"
                ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                ScrollViewer.VerticalScrollBarVisibility="Hidden" Margin="8,0,0,0">

                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="-8,0,0,0">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="8"/>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="8"/>
                                    </Grid.ColumnDefinitions>
                                    <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC64242" Data="F1 M 112,144L 104,144L 112,160L 104,176L 112,176" HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto"/>
                                    <Grid HorizontalAlignment="Stretch" Height="Auto" VerticalAlignment="Stretch" Width="Auto" Grid.Column="1">
                                        <Rectangle Stretch="Fill" Fill="#FFC64242" HorizontalAlignment="Stretch" Height="Auto" Margin="0.5" VerticalAlignment="Stretch" Width="Auto"/>
                                        <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 128,144L 160,144" HorizontalAlignment="Stretch" Height="1" Margin="0" VerticalAlignment="Top" Width="Auto"/>
                                        <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Data="F1 M 128,176L 160,176" HorizontalAlignment="Stretch" Height="1" Margin="0" VerticalAlignment="Bottom" Width="Auto"/>
                                    </Grid>
                                    <Path Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC64242" Data="F1 M 168,144L 176,160L 168,176" Height="Auto" VerticalAlignment="Center" Width="8" HorizontalAlignment="Right" Grid.Column="2" d:LayoutOverrides="GridBox"/>
                                    <DockPanel LastChildFill="True" Grid.ColumnSpan="2" Grid.Column="1">
                                        <Label DockPanel.Dock="Left"  FontSize="12" Content="{Binding Content, FallbackValue=Tagname n/a}" HorizontalAlignment="Left" Grid.Column="0" VerticalAlignment="Center" d:LayoutOverrides="Height" Margin="8,0"/>
                                        <Button DockPanel.Dock="Right" Content="X" Background="Transparent" FontSize="12" Command="{Binding RemoveTagBtn}" Grid.Column="0" Width="13.077" d:LayoutOverrides="Height" VerticalAlignment="Center" Margin="0,0,8,0"/>
                                        <!--<Border Background="#FFf7f7f7" BorderBrush="#FFc9c9c9" BorderThickness="1" CornerRadius="4" HorizontalAlignment="Left" Margin="0,0,0,5.96" d:LayoutOverrides="Height"/>     -->
                                    </DockPanel>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
解决方案

Now as I had to find an answer myself in short time, this is my current solution. Also if you do not need the "selectable" feature of ListBox, you can exchange it with ItemControl.

Here's the code. Please be aware that I've commented out the "IsSelected" Triggers for the ItemStyleContainer... 

 <ListBox Padding="0" DockPanel.Dock="Left" ItemsSource="{Binding TagList}"
                MinWidth="300" Background="Transparent" BorderThickness="0"
                ScrollViewer.HorizontalScrollBarVisibility="Hidden" 
                ScrollViewer.VerticalScrollBarVisibility="Hidden">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Margin="8,0,0,0" Orientation="Horizontal"></StackPanel>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="{x:Type ListBoxItem}">
                            <Setter Property="Background" Value="{DynamicResource LXBarButtonBackgroundNormal}"/>
                            <Setter Property="BorderBrush" Value="{DynamicResource LXBarButtonBorderNormal}"/>
                            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="SnapsToDevicePixels" Value="true"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">

                                        <DockPanel LastChildFill="True" Margin="-8,0,0,0">
                                            <Path DockPanel.Dock="Left"  Stroke="{DynamicResource LXBarButtonBorderNormal}" Fill="{DynamicResource LXBarButtonBackgroundNormal}" Data="F1 M 112,144L 104,144L 112,160L 104,176L 112,176" Stretch="Fill" Height="32" Width="8" />  
                                            <Path DockPanel.Dock="Right" Stroke="{DynamicResource LXBarButtonBorderNormal}" Fill="{DynamicResource LXBarButtonBackgroundNormal}" Data="F1 M 168,144L 176,160L 168,176" Stretch="Fill" Height="32" Width="8" />
                                            <Border Name="Border" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Padding="{TemplateBinding Padding}" BorderThickness="0,1" VerticalAlignment="Center">
                                                      <ContentPresenter />
                                                    <!--
                                                    <ControlTemplate.Triggers>
                                                      <Trigger Property="IsSelected" Value="true">
                                                        <Setter TargetName="Border" Property="Background"
                                                                Value="Blue"/>
                                                      </Trigger>
                                                      <Trigger Property="IsEnabled" Value="false">
                                                        <Setter Property="Foreground"
                                                                Value="Red"/>
                                                      </Trigger>
                                                    </ControlTemplate.Triggers>
                                                    -->
                                            </Border>
                                        </DockPanel>

                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                                    <DockPanel VerticalAlignment="Center" Height="30">
                                        <local:LXImageButton BorderThickness="0" Style="{DynamicResource LXBarImageButton}" Padding="0"  DockPanel.Dock="Right" Background="Transparent" Command="{Binding RemoveTagBtn}" Height="16" Width="16"
                                        NormalImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_normal.png"
                                        ActiveImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_active.png"
                                        HoverImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_hover.png"
                                        PressedImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_hover.png"
                                        DisabledImage="/com.example.Views;component/Resources/Icons/Buttons/btnCloseXS_passive.png"
                                         />
                                        <Label DockPanel.Dock="Left"  FontSize="12" Content="{Binding Content, FallbackValue=Tagname n/a}" VerticalAlignment="Center"/>
                                    </DockPanel>   
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

这篇关于与WPF的ListView的面包屑风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-30 08:27
Powered by LMLPHP ©2024 the 0.004589