Question

我想知道如何实现这一目标：

在一个对话框中，我有一个带图像的按钮：

    <Button>
        <StackPanel Orientation="Horizontal">
            <StaticResourceExtension ResourceKey="Save"/> // Image for this button (floppy disk)
            <TextBlock Text="Add customer"/>
        </StackPanel>
    </Button>

这应该是默认的“保存”按钮＆＃39;在我的项目中。我怎样才能使这个可重复使用？目前我必须在另一个上下文中复制此代码，让我们说添加文章：

    <Button>
        <StackPanel Orientation="Horizontal">
            <StaticResourceExtension ResourceKey="Save"/>
            <TextBlock Text="Add article"/>
        </StackPanel>
    </Button>

我想要一个可以改变它的地方，并且每个地方都可以保存＆＃39;我整个项目中的按钮。我尝试过ControlTemplate但是如果我使用它，系统的按钮默认设计就会消失。但我想要系统的默认设计。

Answer 1

您可以使用样式实现此功能。

<Window.Resources>
    <Style TargetType="{x:Type Button}" x:Key="saveButton">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Width="24" Height="24" Source="{StaticResource Save}"/>
                        <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

然后使用按钮：

<Grid>
    <Button Content="Save" Style="{StaticResource saveButton}"/>
    <Button Content="Add article" Style="{StaticResource saveButton}"/>
</Grid>

将资源字典中的Image替换为BitmapImage s：

<BitmapImage UriSource="Images/MenuIcons/File.png" x:Key="File" />

Answer 2

IconDictionary：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style TargetType="Image">
    <Setter Property="Height" Value="24" />
    <Setter Property="Width" Value="24" />
</Style>

<!--MENU_ICONS:-->
<Image Source="../Images/MenuIcons/KraftSolution.ico" x:Key="KraftSolution" />
<Image Source="../Images/MenuIcons/File.png" x:Key="File" />
<Image Source="../Images/MenuIcons/Close.png" x:Key="Close" />
<Image Source="../Images/MenuIcons/Customers.png" x:Key="Customers"  />
<Image Source="../Images/MenuIcons/Vehicles.png" x:Key="Vehicles"  />
<Image Source="../Images/MenuIcons/Components.png" x:Key="Components"  />
<Image Source="../Images/MenuIcons/Connection.png" x:Key="Connection"  />
<Image Source="../Images/MenuIcons/Info.png" x:Key="Info" />

<!--MENU_OPERATIONS:-->

<!--CUSTOMER:-->
<Image Source="../Images/MenuOperations/Customer/Customer_Add.png" x:Key="CustomerAdd" />
<Image Source="../Images/MenuOperations/Customer/Customer_Edit.png" x:Key="CustomerEdit" />
<Image Source="../Images/MenuOperations/Customer/Customer_Delete.png" x:Key="CustomerDelete" />

<!--VEHICLE:-->
<Image Source="../Images/MenuOperations/Vehicle/Vehicle_Add.png" x:Key="VehicleAdd" />
<Image Source="../Images/MenuOperations/Vehicle/Vehicle_Edit.png" x:Key="VehicleEdit" />
<Image Source="../Images/MenuOperations/Vehicle/Vehicle_Delete.png" x:Key="VehicleDelete" />

<!--COMPONENT:-->
<Image Source="../Images/MenuOperations/Component/Component_Add.png" x:Key="ComponentAdd" />
<Image Source="../Images/MenuOperations/Component/Component_Edit.png" x:Key="ComponentEdit" />
<Image Source="../Images/MenuOperations/Component/Component_Delete.png" x:Key="ComponentDelete" />

<!--TAB CONTROL:-->
<Image Source="../Images/MenuIcons/Notes.png" x:Key="Notes" />
<Image Source="../Images/MenuIcons/Contact.png" x:Key="Contact" />

<!--SEARCH_BUTTON:-->
<Image Source="../Images/MenuIcons/Search.png" x:Key="Search" />

<Image Source="../Images/MenuOperations/Save.png" x:Key="Save" Height="24" Width="24"/>
<Image Source="../Images/MenuOperations/Abort.png" x:Key="Abort" />

为了解决我的问题，我添加了高度=＆＃34; 24＆＃34;宽度=＆＃34; 24＆＃34;保存图像。但我不想要那个。我想要一个可以控制图像大小的位置。

你的风格在另一个资源词典中，我在我的窗口中包含两个词典，我使用按钮和图像。

实现可重复使用的按钮

2 个答案: