Question

我很难将ListBox的ItemTemaplte转换为示例{Surfin}Video Viewer Demo中的Button，

我想在此ListBox中使用类似Item的按钮样式。列表框中的每个项目都有

名称和图像，其中定义了样式。我不喜欢模板＆amp;样式，如果some1具有更多expreince可以

轻松实现，我感谢。（最好运行演示以查看'按钮'（列表框项）的外观，我只需要按钮的外观和感觉:)忽略'视频'）

感谢。

    <Window x:Class="Surfin.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Surfin"
    Background="Black" x:Name="mainWindow"
    MinWidth="650" MinHeight="365" Width="650" Height="365">

  <!-- Declare the MyVideos class, which belongs to the DataTemplatingLab namespace.-->
  <!-- Setting the Directory to the relative path pointing to the Media folder.-->
  <!-- Giving this an x:Key. Now controls in this Window can bind to the videos in the Media folder.-->
  <Window.Resources>
    <MyVideos xmlns="clr-namespace:DataTemplatingLab" Directory="Media" x:Key="vids" />

    <DataTemplate x:Key="mainScreenTemplate">
      <Border BorderBrush="LimeGreen" BorderThickness="2"
              CornerRadius="3" Margin="15">
        <Grid>
          <!-- Background image if no video is playing. -->
          <Image Source="Images\Crystal.jpg" Stretch="Fill"/>
          <!-- The video -->
          <!-- The Source property of the video is bound to the Source property of the current MyVideo object.-->
          <MediaElement Name="mainVideo" Stretch="Fill"
                        Source="{Binding Path=Source}"/>
        </Grid>
      </Border>
    </DataTemplate>



    <DataTemplate x:Key="listBoxTemplate">

      <DataTemplate.Resources>
        <Style TargetType="DockPanel">
          <Setter Property="Cursor" Value="Hand"/>
          <Setter Property="ToolTipService.ShowDuration" Value="80000"/>

        </Style>
      </DataTemplate.Resources>

      <DockPanel Height="70" Width="160">
        <Border Margin="4,5,0,0" Height="50" Width="50">
          <Image Source="Images\Preview.png" />
        </Border>
        <TextBlock Text="{Binding Path=VideoTitle}" VerticalAlignment="Center"
                   TextBlock.TextTrimming="WordEllipsis" Margin="5,5,0,5"
                   Foreground="White" FontSize="12" FontFamily="Comic Sans MS">
        </TextBlock>
      </DockPanel>

    </DataTemplate>

    <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
      <Setter Property="Margin" Value="10,10,10,0" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem">
            <Grid>
              <Rectangle x:Name="GelBackground" RadiusX="9" RadiusY="9"
                         Opacity="1" Fill="{TemplateBinding Background}"
                         Stroke="#66ffffff" StrokeThickness="1" />
              <Rectangle x:Name="GelShine" RadiusX="6" RadiusY="6"
                         Opacity="1" Margin="2,2,2,0" VerticalAlignment="top"
                         Stroke="transparent" Height="15">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="#ccffffff" Offset="0" />
                        <GradientStop Color="transparent" Offset="1" />
                      </GradientStopCollection>
                    </GradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Fill>
              </Rectangle>
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Grid>
            <ControlTemplate.Triggers>
              <EventTrigger RoutedEvent="Mouse.MouseEnter">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                    <Storyboard TargetName="GelBackground"
                                TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                      <ColorAnimation To="LimeGreen" Duration="0:0:0.1" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
              <EventTrigger RoutedEvent="Mouse.MouseLeave">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                    <Storyboard TargetName="GelBackground"
                                TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                      <ColorAnimation Duration="0:0:0.1" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="true">
          <Setter Property="Background" Value="RoyalBlue" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>

  <!-- 1) The ListBox and ContentControl bind to the same source. -->
  <!-- 2) IsSynchronizedWithCurrentItem set to true. -->
  <!-- With the above 2 conditions satisfied, once the DataTemplates are in place,
       the ContentControl will display the content of the selected list item.-->
  <DockPanel>
    <ListBox DockPanel.Dock="Left" Width="200" BorderThickness="0"
             ItemsSource="{Binding Source={StaticResource vids}}"
             IsSynchronizedWithCurrentItem="True"
             ItemTemplate="{StaticResource listBoxTemplate}"
             Background="Transparent"/>
    <ContentControl Content="{Binding Source={StaticResource vids}}"
                    ContentTemplate="{StaticResource mainScreenTemplate}"/>
  </DockPanel>
</Window>

Answer 1

<Style x:Key="{x:Type Button}" TargetType="Button">
      <Setter Property="Margin" Value="10,10,10,0" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid>
              <Rectangle x:Name="GelBackground" RadiusX="9" RadiusY="9"
                         Opacity="1" Fill="{TemplateBinding Background}"
                         Stroke="#66ffffff" StrokeThickness="1" />
              <Rectangle x:Name="GelShine" RadiusX="6" RadiusY="6"
                         Opacity="1" Margin="2,2,2,0" VerticalAlignment="top"
                         Stroke="transparent" Height="15">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="#ccffffff" Offset="0" />
                        <GradientStop Color="transparent" Offset="1" />
                      </GradientStopCollection>
                    </GradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Fill>
              </Rectangle>
              <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Grid>
            <ControlTemplate.Triggers>
              <EventTrigger RoutedEvent="Mouse.MouseEnter">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                    <Storyboard TargetName="GelBackground"
                                TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                      <ColorAnimation To="LimeGreen" Duration="0:0:0.1" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
              <EventTrigger RoutedEvent="Mouse.MouseLeave">
                <EventTrigger.Actions>
                  <BeginStoryboard>
                    <Storyboard TargetName="GelBackground"
                                TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                      <ColorAnimation Duration="0:0:0.1" />
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger.Actions>
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
          <Setter Property="Background" Value="RoyalBlue" />
        </Trigger>
      </Style.Triggers>
    </Style>

像这样的东西。希望这会有所帮助。

将ListBox模板转换为Button Template

1 个答案: