2011-09-10 76 views
1

我有这个用户控件在ListBox周围生成1px边框。列表框1px边框 - 默认边框 - Bd样式

我发现它是默认的Bd边框。我似乎无法弄清楚如何设计它,所以1px间隔不再出现。

<UserControl x:Class="Thumbnails" 
     xmlns:local="clr-namespace:ContentPresenter" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:sys="clr-namespace:System;assembly=mscorlib" 
     mc:Ignorable="d" 
     d:DesignHeight="350" d:DesignWidth="800"> 
<UserControl.Resources> 
    <local:ThumbImageHeightConverter x:Key="HeightConv" /> 
    <local:ThumbImageWidthConverter x:Key="WidthConv" /> 
    <local:InnerGridHeightConverter x:Key="InnerGridHeightConv" /> 
    <local:ReflectWidthConverter x:Key="ReflectWidthConv" /> 
    <local:ReflectCenterYConv x:Key="ReflectCenterYConv" /> 
    <local:BorderThicknessScale x:Key="BorderThicknessScale" /> 
    <local:BorderCornerRadiusScale x:Key="BorderCornerRadiusScale" /> 

    <Storyboard x:Key="FadeUpAndFlash"> 
     <!--<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:10" FillBehavior="Stop" />--> 
     <DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:1" FillBehavior="Stop" /> 
    </Storyboard> 
    <Storyboard x:Key="ReflectFadeUpAndFlash"> 
     <!--<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:10" FillBehavior="Stop" />--> 
     <DoubleAnimation From="0" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:1" FillBehavior="Stop" /> 
    </Storyboard> 

    <Style TargetType="{x:Type ListBox}"> 
     <!-- Set the ItemTemplate of the ListBox to a DataTemplate which explains how to display an object of type BitmapImage. --> 
     <Style.Resources> 
      <!-- Background of selected item when focussed --> 
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black"/> 
      <!-- Background of selected item when not focussed --> 
      <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Black" /> 

     </Style.Resources> 

     <Setter Property="ItemTemplate"> 
      <Setter.Value> 
       <DataTemplate> 
        <Grid x:Name="ThumbGrid" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBox, Path=ActualHeight}" > 
         <Grid.RowDefinitions> 
          <RowDefinition x:Name="ThumbGridThumbImgRow" Height="80*" ></RowDefinition> 
          <RowDefinition x:Name="GridReflectRow" Height="20*" ></RowDefinition> 
         </Grid.RowDefinitions> 

         <Border x:Name="HighlightBorder" Padding="2" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center"> 
          <Border.Style> 
           <Style TargetType="{x:Type Border}"> 
            <Setter Property="BorderBrush" Value="Black"/> 
            <Style.Triggers> 
             <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True"> 

              <DataTrigger.Setters> 
               <Setter Property="BorderBrush" Value="Yellow"/> 
              </DataTrigger.Setters> 
              <DataTrigger.EnterActions> 
               <BeginStoryboard Storyboard="{StaticResource FadeUpAndFlash}" Name="AnimateImageBorder" /> 
              </DataTrigger.EnterActions> 
              <DataTrigger.ExitActions> 
               <StopStoryboard BeginStoryboardName="AnimateImageBorder" /> 
              </DataTrigger.ExitActions> 

              <!--<Setter Property="BorderBrush" Value="Yellow"/>--> 
             </DataTrigger> 
            </Style.Triggers> 
           </Style> 
          </Border.Style> 
          <Border.Resources> 
           <sys:Int32 x:Key="HighlightBorderOrigRadius">18</sys:Int32> 
          </Border.Resources> 
          <Border.CornerRadius> 
           <MultiBinding Converter="{StaticResource BorderCornerRadiusScale}"> 
            <Binding ElementName="HighlightBorder" Path="ActualWidth" /> 
            <Binding Source="{StaticResource HighlightBorderOrigRadius}" /> 
           </MultiBinding> 
          </Border.CornerRadius> 
          <Border.BorderThickness> 
           <MultiBinding Converter="{StaticResource BorderThicknessScale}"> 
            <Binding ElementName="HighlightBorder" Path="ActualWidth" /> 
           </MultiBinding> 
          </Border.BorderThickness> 
          <Grid x:Name="ThumbInnerGrid"> 
           <Grid.Height> 
            <MultiBinding Converter="{StaticResource InnerGridHeightConv}"> 
             <Binding ElementName="ThumbGrid" Path="ActualHeight" /> 
             <Binding ElementName="HighlightBorder" Path="CornerRadius" /> 
             <Binding ElementName="mask" Path="CornerRadius" /> 
            </MultiBinding> 
           </Grid.Height> 
           <Border x:Name="mask" Background="Black"> 

            <Border.Resources> 
             <sys:Int32 x:Key="MaskBorderOrigRadius">15</sys:Int32> 
            </Border.Resources> 
            <Border.CornerRadius> 
             <MultiBinding Converter="{StaticResource BorderCornerRadiusScale}"> 
              <Binding ElementName="mask" Path="ActualWidth" /> 
              <Binding Source="{StaticResource MaskBorderOrigRadius}" /> 
             </MultiBinding> 
            </Border.CornerRadius> 
           </Border> 
           <StackPanel x:Name="ThumbInnerStack" VerticalAlignment="Top"> 
            <StackPanel.OpacityMask> 
             <VisualBrush Visual="{Binding ElementName=mask}"/> 
            </StackPanel.OpacityMask> 

            <Image x:Name="ThumbImg" Stretch="UniformToFill" > 
             <Image.Height> 
              <MultiBinding Converter="{StaticResource HeightConv}"> 
               <Binding ElementName="HighlightBorder" Path="ActualHeight" /> 
               <Binding ElementName="HighlightBorder" Path="BorderThickness" /> 
               <Binding ElementName="HighlightBorder" Path="Padding" /> 
              </MultiBinding> 
             </Image.Height> 
             <Image.Width> 
              <MultiBinding Converter="{StaticResource WidthConv}"> 
               <Binding ElementName="ThumbImg" Path="ActualHeight" /> 
               <Binding ElementName="HighlightBorder" Path="BorderThickness" /> 
               <Binding ElementName="HighlightBorder" Path="Padding" /> 
              </MultiBinding> 
             </Image.Width> 
             <Image.Source> 
              <BitmapImage UriSource="{Binding Path=Src}"></BitmapImage> 
             </Image.Source> 
            </Image> 
           </StackPanel> 
          </Grid> 
         </Border> 
         <Border x:Name="ReflectBorder" Margin="0,-1,0,0" VerticalAlignment="Top" Height="{Binding ElementName=ThumbImg, Path=ActualHeight}" Grid.Row="1" Opacity="0.75" > 
          <Border.Style> 
           <Style TargetType="{x:Type Border}"> 

            <Style.Triggers> 
             <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True"> 

              <DataTrigger.EnterActions> 
               <BeginStoryboard Storyboard="{StaticResource ReflectFadeUpAndFlash}" Name="AnimateImageReflection" /> 
              </DataTrigger.EnterActions> 
              <DataTrigger.ExitActions> 
               <StopStoryboard BeginStoryboardName="AnimateImageReflection" /> 
              </DataTrigger.ExitActions> 

              <!--<Setter Property="BorderBrush" Value="Yellow"/>--> 
             </DataTrigger> 
            </Style.Triggers> 
           </Style> 
          </Border.Style> 
          <Border.Resources> 
            <sys:Int32 x:Key="MaskBorderOrigRadius">15</sys:Int32> 
           </Border.Resources> 
           <Border.CornerRadius> 
            <MultiBinding Converter="{StaticResource BorderCornerRadiusScale}"> 
            <Binding ElementName="ReflectBorder" Path="ActualWidth" /> 
             <Binding Source="{StaticResource MaskBorderOrigRadius}" /> 
            </MultiBinding> 
           </Border.CornerRadius> 

          <Border.Width> 
           <MultiBinding Converter="{StaticResource ReflectWidthConv}"> 
            <Binding ElementName="HighlightBorder" Path="ActualWidth" /> 
            <Binding ElementName="HighlightBorder" Path="BorderThickness" /> 
           </MultiBinding> 
          </Border.Width> 
          <Border.Background> 
           <VisualBrush Visual="{Binding ElementName=ThumbImg}"> 
            <VisualBrush.Transform> 
             <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="200"> 
              <ScaleTransform.CenterY> 
               <MultiBinding Converter="{StaticResource ReflectCenterYConv}"> 
                <Binding ElementName="ThumbImg" Path="ActualHeight" /> 
               </MultiBinding> 
              </ScaleTransform.CenterY> 
             </ScaleTransform> 
            </VisualBrush.Transform> 
           </VisualBrush> 
          </Border.Background> 
          <Border.OpacityMask> 
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.3"> 
            <GradientStop Offset="0" Color="Black"></GradientStop> 
            <GradientStop Offset="0.15" Color="Transparent"></GradientStop> 
           </LinearGradientBrush> 
          </Border.OpacityMask> 
         </Border> 
         <Grid Grid.Row="1" MaxWidth="{Binding ElementName=ThumbImg, Path=ActualWidth}"> 
          <Border Padding="10,0,10,25"> 
           <Viewbox VerticalAlignment="Top" MaxWidth="{Binding ElementName=ThumbImg, Path=ActualWidth}"> 
            <Label x:Name="ThumbTitle" Margin="0,-5,0,0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Content="{Binding Path=Title}" FontFamily="Arial" Foreground="White" /> 
           </Viewbox> 
          </Border> 
         </Grid> 
        </Grid> 
       </DataTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <VirtualizingStackPanel x:Name="ThumbListStack" Orientation="Horizontal" Loaded="StackPanel_Loaded"> 
         <VirtualizingStackPanel.RenderTransform> 
         <TranslateTransform X="0" Y="0" /> 
         </VirtualizingStackPanel.RenderTransform> 
        </VirtualizingStackPanel> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" /> 
     <Setter Property="Background" Value="Black"/> 

    </Style> 

</UserControl.Resources> 

    <UserControl.DataContext> 
     <ObjectDataProvider ObjectType="{x:Type local:ThumbImageLoader}" MethodName="LoadImagesv2" IsAsynchronous="True" /> 
</UserControl.DataContext> 


<!-- This ListBox is the Content of the Window. Normally you would have a panel of some type as the Window's Content, but let's keep it simple. --> 
<Grid x:Name="ThumbListBoxGrid"> 
    <ListBox x:Name="ThumbListBox" ItemsSource="{Binding}" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBoxGrid, Path=ActualHeight}" IsSynchronizedWithCurrentItem="True" /> 
</Grid> 

如何样式默认的边境?

+0

我发现使用代码隐藏设置边框厚度的方法,但最好我想将所有的样式在XAML。代码隐藏方法是从这里采取:http://stackoverflow.com/questions/4704009/gaps-between-items-in-my-listbox – Ben

+0

我已经想通了,但我不能在5小时... – Ben

回答

6

这是我用过的。

<Setter Property="Control.Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="ListBox"> 
      <Border BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="0" Name="Bd" Background="{TemplateBinding Panel.Background}" SnapsToDevicePixels="True" Padding="0"> 
       <ScrollViewer Focusable="False" Padding="{TemplateBinding Control.Padding}"> 
        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" /> 
       </ScrollViewer> 
      </Border> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 
+0

谢谢,它的工作。 – RonakThakkar