如何重新设置控件的样式，使其在WPF中具有特定的UI

这里我给一个控件的图像，它将显示许多图像的缩略图，用户可以在图像之间滚动。用户可以设置每行显示多少图像。用户可以设置将显示多少行，并可以进行数据绑定等

我是WPF新手，所以请指导我如何绘制上述输出。谢谢

更新

---

据我所知，您需要添加向上和向下，这将滚动带有图像的

列表框<代码>列表框

已包含带有标准滚动条的

滚动查看器

。我建议我们应该隐藏标准滚动条，并为自己设置导航按钮

这些按钮的功能将参考标准的

ScrollViewer

。要访问

列表框

中的

滚动查看器

，必须使用以下功能：

public static DependencyObject GetScrollViewer(DependencyObject Object)
{
    if (Object is ScrollViewer)
    {
        return Object;
    }

    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(Object); i++)
    {
        var child = VisualTreeHelper.GetChild(Object, i);
        var result = GetScrollViewer(child);

        if (result == null)
        {
            continue;
        }
        else
        {
            return result;
        }
    }

    return null;
}

我们为按钮定义了一种样式，它将包含一个箭头形式的路径。下面是一个带有注释的完整示例

XAML

<Window x:Class="CustomListboxNavHelp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:CustomListboxNavHelp"
    Title="MainWindow" Height="450" Width="525"
    WindowStartupLocation="CenterScreen"
    ContentRendered="Window_ContentRendered">

<Window.Resources>      
    <!-- Style for ListBox -->
    <Style x:Key="MyListBoxStyle" TargetType="{x:Type ListBox}">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
        <Setter Property="HorizontalAlignment" Value="Center" />

        <!-- Hidden Scrollbar`s -->
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />

        <!-- DataTemplate for ListBoxItem -->
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border BorderBrush="Transparent" BorderThickness="1">
                        <Image Source="{Binding Path=MyImagePath}" Stretch="Fill" Width="100" Height="140" />
                    </Border>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Style for UpButton -->
    <Style x:Key="UpButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="ToolTip" Value="Up" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="0" Background="{TemplateBinding Background}">
                        <Grid>
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <Path x:Name="UpButton" SnapsToDevicePixels="True" Width="20" Height="18" Stretch="Fill" Fill="Gray" Data="F1 M 37.8516,35.625L 34.6849,38.7917L 23.6016,50.2708L 23.6016,39.9792L 37.8516,24.9375L 52.1016,39.9792L 52.1016,50.2708L 41.0182,38.7917L 37.8516,35.625 Z "/>
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="UpButton" Property="Fill" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Style for DownButton -->
    <Style x:Key="DownButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="ToolTip" Value="Down" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border CornerRadius="0" Background="{TemplateBinding Background}">
                        <Grid>
                            <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <Path x:Name="DownButton" SnapsToDevicePixels="True" Width="20" Height="18" Stretch="Fill" Fill="Gray" Data="F1 M 37.8516,39.5833L 52.1016,24.9375L 52.1016,35.2292L 37.8516,50.2708L 23.6016,35.2292L 23.6016,24.9375L 37.8516,39.5833 Z "/>
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="DownButton" Property="Fill" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <StackPanel>
        <Button Name="UpDirection" Style="{StaticResource UpButtonStyle}" Width="40" Height="30" Click="UpDirection_Click" />

        <ListBox Name="MyListBox" Style="{StaticResource MyListBoxStyle}" Width="110" Height="300" />

        <Button Name="DownDirection" Style="{StaticResource DownButtonStyle}" Width="40" Height="30" Click="DownDirection_Click" />
    </StackPanel>
</Grid>
</Window>

输出

编辑：

要在一个

ListBoxItem

中显示多个图像，需要更正

ItemTemplate

。我建议使用

网格

，因为它是

ColumnDefinition

的一个属性，用于定义项目的列号

另一件事是，你知道这是可取的：

• 一个

  列表框项目中显示的最终图像数
  

• 对于大量图像需要改进的方法，因为它更适合静态显示

更正

ItemTenplate

如下所示：

<Setter Property="ItemTemplate">
    <Setter.Value>
        <DataTemplate>
            <Border BorderBrush="Transparent" BorderThickness="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Image Source="{Binding Path=MyImagePathOne}" Grid.Column="0" Stretch="Fill" Width="100" Height="140" />
                    <Image Source="{Binding Path=MyImagePathTwo}" Grid.Column="1" Stretch="Fill" Width="100" Height="140" />
                </Grid>
            </Border>
       </DataTemplate>
   </Setter.Value>
</Setter>

将图像添加到集合：

ImagesCollection.Add(new ImagesClass()
{
    MyImagePathOne = "Cover1.png",
    MyImagePathTwo = "Cover2.png"
});

ImagesCollection.Add(new ImagesClass()
{
    MyImagePathOne = "Cover3.png",
    MyImagePathTwo = "Cover4.png"
});

ImagesCollection.Add(new ImagesClass()
{
    MyImagePathOne = "Cover5.png",
    MyImagePathTwo = "Cover6.png"
});

输出

如果您确实需要动态更改图像的数量，在本例中，您可以这样做-在设置属性的位置设置集合，例如，仅一个图像。然后，清洁它并将其放置在具有任意数量图像的设定值上

我认为这种方法不是百分之百适用于这种方法。如果速度很重要，或者需要大量图像，则有必要优化该方法，或者提出另一种方法

编辑2

上下按钮：

<Button Name="Up" Width="150" Height="15" Background="#CDE2FF">
    <Button.Content>
        <Polygon Points="3.33,0 6.66,6.66, 0,6.66" Fill="#466690" />
    </Button.Content>
</Button>

<Button Name="Down" Width="150" Height="15" Background="#CDE2FF" Margin="0,10,0,0">
    <Button.Content>
        <Polygon Points="0,0 3.33,6.66, 6.66,0" Fill="#466690" />
    </Button.Content>
</Button>

输出

---

将列表框与ItemStyle一起使用…@Thomas真的吗？恕我直言，您已获得4000多点声誉积分，足以让您更好地了解。。。基本上你是说‘这是我希望你们都免费为我做的工作，这样我就不用费心自己去做了’。正如您应该已经知道的那样，这里的用户通常不喜欢这样。请告诉我们你已经尝试了什么。我正在从这个url看这段代码，我想它有点相似，但在UI和功能上仍然有很多不同。这里我给出的图像是用户可以单击以在图像中导航的区域。所以我在寻求帮助。谢谢我是wpf的新手…你需要如何改变你的代码才能在同一行显示两张图片？谢谢你更新你的答案。我已经更新了我的问题，请看一下。谢谢你的回答。根据我给出的图片，向上/向下按钮的宽度应等于列表框的宽度。u定义按钮宽度=150，列表框宽度=110。所以我认为这需要改变。无论如何，帮了大忙……干杯：）：）我想问你一个问题，因为我觉得你在WPF里的声音已经足够好了。是否有任何网站只为开发漂亮的用户界面提供wpf的大量示例代码。我在谷歌上搜索，但没有找到。如果你知道的话，请给我那些网址。thanks@Thomas例如我通常这样做。选择控件以满足您的需要，然后我查找他的

样式

，例如，然后根据他的想法编辑它。例如，您可以安装并查看新元素以及样式。要查找

路径

，图标可以推荐一个超级网站-，您可以在那里找到任何可以在WPF中正常使用的图标。你也可以阅读亚当·内森的书中的相关章节，这是一本非常好的书。

public class ImagesClass
{
    private string myImagePathOne = null;

    public string MyImagePathOne
    {
        get
        {
            return myImagePathOne;
        }

        set
        {
            myImagePathOne = value;
        }
    }

    private string myImagePathTwo = null;

    public string MyImagePathTwo
    {
        get
        {
            return myImagePathTwo;
        }

        set
        {
            myImagePathTwo = value;
        }
    }
}

ImagesCollection.Add(new ImagesClass()
{
    MyImagePathOne = "Cover1.png",
    MyImagePathTwo = "Cover2.png"
});

ImagesCollection.Add(new ImagesClass()
{
    MyImagePathOne = "Cover3.png",
    MyImagePathTwo = "Cover4.png"
});

ImagesCollection.Add(new ImagesClass()
{
    MyImagePathOne = "Cover5.png",
    MyImagePathTwo = "Cover6.png"
});

<Button Name="Up" Width="150" Height="15" Background="#CDE2FF">
    <Button.Content>
        <Polygon Points="3.33,0 6.66,6.66, 0,6.66" Fill="#466690" />
    </Button.Content>
</Button>

<Button Name="Down" Width="150" Height="15" Background="#CDE2FF" Margin="0,10,0,0">
    <Button.Content>
        <Polygon Points="0,0 3.33,6.66, 6.66,0" Fill="#466690" />
    </Button.Content>
</Button>