Question

我想用XAML画布图标替换png图像。看起来更好，文件更小，我可以自定义它们。按下按钮后，我通常将图像名称传递给视图模型，然后决定在按钮上显示哪个图标。打开或关闭的锁。我有办法用帆布做吗？只要可区分，CommandParamenter都没关系。

<Button Background="Transparent" Width="24" Height="24" BorderBrush="{x:Null}" Command="{Binding LockCommand}" CommandParameter="{Binding ElementName=ButtonImage, Path=Source, UpdateSourceTrigger=PropertyChanged}">

<!-- OLD CODE START
<Image Name="ButtonImage" >
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Locked, UpdateSourceTrigger=PropertyChanged}" Value="True">
                    <Setter Property="Source" Value="Icons/png/24px/locked.png" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Locked, UpdateSourceTrigger=PropertyChanged}" Value="False">
                    <Setter Property="Source" Value="Icons/png/24px/unlocked.png" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>
OLD CODE END -->

<!-- NEW CODE NOT WORKING -->
<Canvas Name="ButtonImage" >
    <Canvas.Style>
        <Style TargetType="{x:Type Canvas}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Locked, UpdateSourceTrigger=PropertyChanged}" Value="True" >
                    <Setter Property="Path.Data" Value="M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />
                    <Setter Property="Path.Fill" Value="Black"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding Locked, UpdateSourceTrigger=PropertyChanged}" Value="False">
                    <Setter Property="Path.Data" Value="M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,1 10,15A2,2 0 0,1 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17Z" />
                    <Setter Property="Path.Fill" Value="DimGray"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Canvas.Style>
</Canvas>

</Button>

VIEW-MODEL逻辑

  public ICommand LockCommand
        {
            get
            {
                return _lockCommand ?? new CommandHandler(x =>
                {
                    if (x is null)
                    {
                        return;
                    }

                    string buttonType = x.ToString();


                    if (buttonType.EndsWith("unlocked.png"))
                    {
                        Locked = true;
                    }
                    else if (buttonType.EndsWith("locked.png"))
                    {
                        Locked = false;
                    }
                });
            }
        }

具有DataTriggers的WPF MVVM切换按钮画布

0 个答案: