WPF中style的Image或ImageBrush中的Source和ImageSource由調用者傳入的方法

在WPF開發時,很多控件的Style格式相同,但是其中的圖片需要由每個調用的控件來傳入決定,
嘗試過將Source和ImageSource綁定爲TemplateBinding,但是多次嘗試都是失敗的。

多次嘗試後,發現原來圖片的路徑不能用TemplateBinding綁定傳入,但是可以在內部通過
{Binding ElementName=grid,Path=Tag}等方式傳入(grid是style中一個控件的名稱),
這樣問題就變的簡單了。

話不多說,直接看下面代碼

**

Style定義:

**

<Style x:Key="dragbtn0" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="grid" VerticalAlignment="Top" Margin="0" Tag="{TemplateBinding Tag}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="43"/>
                            <RowDefinition Height="18"/>
                        </Grid.RowDefinitions>
                        <Ellipse Name="ep" Width="36" Height="36" VerticalAlignment="Top" Stroke="LightBlue">
                            <Ellipse.Fill>
                                <ImageBrush x:Name="coles" ImageSource="{Binding ElementName=grid,Path=Tag}"/>
                            </Ellipse.Fill>
                        </Ellipse>
                        <TextBlock Name="et" Text="{TemplateBinding Content}" Grid.Row="1" HorizontalAlignment="Center" FontSize="11"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="ep" Property="Width" Value="40"/>
                            <Setter TargetName="ep" Property="Height" Value="40"/>
                            <Setter TargetName="et" Property="FontSize" Value="12"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

**

控件調用

**

<Button Name="btn0" Content="網抓數據" Height="60" Width="60" HorizontalAlignment="Left" VerticalAlignment="Top"
 Cursor="SizeAll" Style="{StaticResource dragbtn0}" Tag="..\MySources\images\inputweb.png"
  PreviewMouseLeftButtonDown="temtest_MouseDown" MouseLeftButtonUp="Window_MouseLeftButtonUp"/>

在這裏插入圖片描述
通過這種方式,可以將圖片路徑放入控件的Tag中,再有Tag傳入Style內部,實現了動態傳入圖片的需求。

**

實現的效果如下:

**

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章