none
在button中用引用的Style binding Command的Image RRS feed

  • 問題

  • 我想用MVVM模式,

    在VIEW-MODE中,建立一個ICOMMAND的類別,此類別包含一個 BitmapImage 的Img屬性,及一個string的DisplayText屬性。

    在VIEW中,我引用一個STYLE,在BUTTON中的CONTENT引用此STYLE,結果此CONTENT中的IMAGE無法BINDING到ICOMMAND中的IMG屬性,反而會顯示VIEW-MODEL類別的IMG屬性的圖。不知我應該怎麼改才能讓 BUTTON CONTENT裡的IMAGE是BINDING到ICOMMAND裡的IMG屬性呢?

    原始碼如下:

    XAML:

    <Window x:Class="ImageBindingApplication.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:vm="clr-namespace:vm;assembly=vm"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <ResourceDictionary Source="Dictionary1.Xaml"></ResourceDictionary>
            
        </Window.Resources>
        <Window.DataContext>
            <vm:VMClass/>
        </Window.DataContext>
        <Grid>
            <StackPanel>
                <Button Command="{Binding Btn1}" Height="140" Style="{DynamicResource MyButtonStyle}" ></Button>            
            </StackPanel>
        </Grid>
    </Window>

    Dictionary1.Xaml :

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
            <Setter Property="Content">
                <Setter.Value>                
                    <StackPanel>
                        <Image Source="{Binding Img}"/>
                        <Label Content="{Binding DisplayText}"></Label>
                    </StackPanel>                
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>

    VM:C#:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Windows;
    using System.Windows.Input;
    using System.Windows.Media.Imaging;
    
    namespace vm
    {
        public class VMClass
        {
            BitmapImage img;
            btn btn1;
    
    
            public btn Btn1
            {
                get { return btn1; }
                set { btn1 = value; }
            }
    
            public BitmapImage Img
            {
                get { return img; }
                set { img = value; }
            }
            public VMClass()
            {
                img = new BitmapImage(new Uri("/vm;component/h.png", UriKind.RelativeOrAbsolute));
                btn1 = new btn();
                btn1.Img = new BitmapImage(new Uri("/vm;component/h.png", UriKind.RelativeOrAbsolute));
                btn1.DisplayText1 = "button 1";
                
            }
        }
    
        public class btn : ICommand
        {
    
            BitmapImage img;
            public BitmapImage Img
            {
                get { return img; }
                set { img = value; }
            }
            string DisplayText;
            public string DisplayText1
            {
                get { return DisplayText; }
                set { DisplayText = value; }
            }
    
            public bool CanExecute(object parameter)
            {
                return true;
            }
    
            public event EventHandler CanExecuteChanged;
    
            public void Execute(object parameter)
            {
                MessageBox.Show("hhh");
            }
        }
    }


    • 已編輯 [艾爾文] 2013年11月25日 下午 05:14 補充
    2013年11月25日 下午 05:13

解答

  • UI 的歸 UI , 命令的歸命令, 資料的歸資料, 這是我一向的習慣.

    相依的太過, 遇到要修改就會頭很痛


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    • 已標示為解答 [艾爾文] 2013年11月26日 下午 04:02
    2013年11月26日 上午 10:02
    版主

所有回覆

  • Execute 方法中的 parameter 參數. 就是那個 Button, 你把 paramter 轉型回 FrameworkElement 就可以取得 DataContext.


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2013年11月26日 上午 03:00
    版主
  • 感謝版主,我想知道的是,在Dictionary1.Xaml中的MyButtonStyle怎麼做,才能讓button的content中的image可以binding到這個button的command所binding到的那個 icommand的Img屬性。

    假若有多個button, 我想讓每個button都套用 MyButtonStyle ,就可以讓每個button的content裡的image直接binding到它的ICommand裡的Img屬性。

    另,我程式run起來,在icommand的execute事件裡,parameter都是null,不知 xaml 的CommandParameter該如何做就會傳入button本身?

    感謝

    2013年11月26日 上午 03:35
  • 你是要倒過來 ? 把 Command 中的屬性 Bind 給 Button ?

    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2013年11月26日 上午 03:41
    版主
  • 不是倒過來,還是一樣從 Button   bind到 view-model 中的 btn 中的屬性。




    2013年11月26日 上午 03:47
  • <Button Command="{Binding Btn1}" Height="140" Style="{DynamicResource MyButtonStyle}" ></Button>

    你這邊只有 Bind Command ? 並沒有指派東西給 Button 的 DataContext, 所以資料的部分應該是空的.

    而且你為什麼要把 Command 和 Data 混在一起 ?


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2013年11月26日 上午 09:19
    版主
  • 我本來的想法是每個Button都有個小圖和一個簡短的說明,

    例如上面一個放大鏡的圖,下面寫「查詢」

    因為覺得圖和字是和功能相符的,所以才想到把圖和字放到實作ICommand的類別中。

    我知道可以在VIEW-MODEL中建立 LIST<BitmapImage> 屬性,然後在 XAML 中逐個 BUTTON去指定它的 CONTENT 中的 IMAGE。但我覺得這樣蠻麻煩的,所以才想偷個懶把功能、圖、字放在同一類別裡,然後用個 STYLE 就全部搞定了。

    不知一般業界比較好的方法是怎麼設計的?

    2013年11月26日 上午 09:41
  • UI 的歸 UI , 命令的歸命令, 資料的歸資料, 這是我一向的習慣.

    相依的太過, 遇到要修改就會頭很痛


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    • 已標示為解答 [艾爾文] 2013年11月26日 下午 04:02
    2013年11月26日 上午 10:02
    版主
  • 你要硬把它混在一起也不是不行, 但是你的 UI 上的Button 就得要 把 DataContext 也 Binding 到 btn1 上.

    因為你只 Bind Command 是不會Bind 到資料的.


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2013年11月26日 下午 02:22
    版主
  • 好的,感謝版主~
    2013年11月26日 下午 04:01
  • 既然是不好的設計,就不要這樣做了,感謝版主

    所以,在VIEW-MODEL中,就要有三個集合,一個是ICOMMAND集合,一個是IMAGE集合,一個是說明的集合,然後在VIEW中的BUTTON中再分別把Command bind到 ICOMMAND其中之後,Content中的Image bind到 IMAGE其中之一,Content中的Label bind到說明的其中之一。

    是不是該這樣設計?

    2013年11月26日 下午 04:09
  • 你可以設計一個類別是有 ImagePath 和 說明 (string) 的 ..

    DataContext 指向這類別實體, 然後 Image  Bind  ImagePath , TextBlock Bind 說明


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2013年11月26日 下午 04:41
    版主
  • 好的,我了解了,感謝版主
    2013年11月27日 上午 01:53