1

我是 Windows Phone 8 开发的新手(你可以说知情的菜鸟在寻找答案),我正在寻求解决以下问题的帮助:

我有usercontrol - 更具体地说是一个包含 Image 和 Text 的按钮。我希望该按钮具有以下属性:

  • ContentImageNormal - 启用按钮时显示的图像
  • ContentImageDisabled - 这将是禁用按钮时显示的图像

我现在拥有的是在我的项目中添加到文件夹 UserControls 中的用户控件,我可以使用它。我为它创建了一个样式并更改了禁用按钮的背景等。

我想知道什么:

  • 如何更改代码隐藏和其他所需的东西,以便我可以在下面根据需要使用它?

(我将在我的程序中使用该按钮六次,并且我想将此用户控件用作它的一种模板 - 准备它,所以我只需为这两个状态指定 ImageSources,其余的会做)

期望使用示例:

<UserControls:MainPageButton ContentText="Log In" ContentImageNormal="/ImagePathOrResourceETC.png" ContentImageDisabled="/ImagePathOrResourceETC.png"/>

XAML 我有:

    <UserControl x:Class="ProjectNameSpace.UserControls.MainPageButton">
        <Grid x:Name="LayoutRoot">
            <Button >
                <Button.Content>
                    <Grid>
                        ...omitted...
                        <Image x:Name="ContentImageHolder" ... />
                        <TextBlock x:Name="ContentTextBlock"  .../>
                    </Grid>
                </Button.Content>
            </Button>
        </Grid>
    </UserControl>

我目前有 C# 代码隐藏:

...usings omitted...
public partial class MainPageButton : UserControl
{
    ...constructor and text setting omitted for brevity...
    public ImageSource ContentImage
    {
        get
        {
            return ContentImageHolder.Source;
        }
        set
        {
            ContentImageHolder.Source = value;
        }
    }
}
}
4

4 回答 4

3

这很容易启动(嗯,这对我来说,因为我有大量的片段来处理大多数困难的东西),所以这里它是一个自定义的 UserControl。

首先,使用您的图像创建用户控件。耶。

<UserControl x:Class="CustomImageControl.Controls.ThreeWay"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" >
    <Image
        x:Name="derpImage" />
</UserControl>

特难,那里。

接下来,在代码隐藏中,您必须执行以下操作。首先,为代表您拥有的任何状态的每种类型的图像创建 DependencyProperties。在我的示例中,出于空间原因,我省略了 InactiveImage 和 DerpImage 属性。你可以看到 ActiveImage 是如何工作的。接下来,为控件的状态创建一个 DependencyProperty。在示例中,我有一个 State 枚举来定义它,但你可以做任何你想做的事情。在更改时,我会检查新值并根据需要更改图像。简单的。

public partial class ThreeWay : UserControl
{
    #region ActiveImage
    public static readonly DependencyProperty ActiveImageProperty =
        DependencyProperty.Register(
            "ActiveImage",
            typeof(ImageSource),
            typeof(ThreeWay),
            new UIPropertyMetadata());

    public ImageSource ActiveImage
    {
        get { return (ImageSource)GetValue(ActiveImageProperty); }
        set { SetValue(ActiveImageProperty, value); }
    }
    #endregion

    //InactiveImage and DerpImage snipped to keep this short

    #region ImageState
    public static readonly DependencyProperty ImageStateProperty =
        DependencyProperty.Register(
            "ImageState",
            typeof(State),
            typeof(ThreeWay),
            new UIPropertyMetadata(State.Derp, OnImageStatePropertyChanged));

    private static void OnImageStatePropertyChanged(
        DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        (d as ThreeWay).OnImageStateChanged(
          e.OldValue as State, e.NewValue as State);
    }

    private void OnImageStateChanged(State oldValue, State newValue)
    {
        switch(newValue)
        {
            case State.Active:
                this.derpImage.Source = ActiveImage;
                break;
            case State.Inactive:
                this.derpImage.Source = InactiveImage;
                break;
            case State.Derp:
                this.derpImage.Source = DerpImage;
                break;
        }
    }

    public State ImageState
    {
        get { return (State)GetValue(ImageStateProperty); }
        set { SetValue(ImageStateProperty, value); }
    }
    #endregion

    public ThreeWay()
    {
        InitializeComponent();
    }

    public enum State
    {
        Active,
        Inactive,
        Derp
    }
}

就是这样。你会像这样使用它:

<cc:ThreeWay xmlns:cc="clr-namespace:CustomImageControl.Controls"
             ActiveImage="active.png"
             InactiveImage="inactive.png"
             DerpImage="derp.jpg"
             ImageState="{Binding State}" />

这假定 DataContext 是一个具有名为Statetype的属性的实例ThreeWay.State。如果不是,则可以使用自定义转换器将任何(可为空的布尔?)转换为正确的类型。

于 2013-09-26T17:40:33.990 回答
2

简,

对于您的问题,您只是缺少一件事。

在您的 UserControl 中,您必须像这样创建 DependencyProperties:

 public static readonly DependencyProperty ContentImageNormalProperty =

            DependencyProperty.Register("ContentImageNormal",

                typeof(ImageSource ),

                typeof(MainPageButton));

那么你的属性应该是这样的:

     public string ContentImageNormal{ get { return (ImageSource)this.GetValue(ContentImageNormalProperty); } 
set { this.SetValue(ContentImageNormalProperty, value); } }

对您要设置的每个属性执行此操作...

请参阅此示例:http ://stevenhollidge.blogspot.pt/2012/03/dependency-properties-in-user-control.html

我希望这可以帮助你。

问候, 塞尔吉奥·蒙泰罗

于 2013-09-26T17:17:25.407 回答
2

看来您真正想做的是创建一个 CustomControl 而不是 UserControl。所以我将创建一个继承自 Button 的自定义控件,并使用按钮视觉状态在两个图像之间切换。这是一个实现:在 ThemeS/Generic.xaml 中添加此样式

<Style  TargetType="ButtonWithImage">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="enablebleImage">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="disableImage">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <Grid>
                                <Image x:Name="disableImage" Source="{TemplateBinding EnableImageSource}" Visibility="Collapsed"/>
                                <Image x:Name="enablebleImage"  Source="{TemplateBinding DisableImageSource}"/>
                              <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

并定义以下类:

public class ButtonWithImage :Button
{
    public static readonly DependencyProperty DisableImageSourceProperty =
        DependencyProperty.Register("DisableImageSource", typeof (ImageSource), typeof (ButtonWithImage), new PropertyMetadata(default(ImageSource)));

    public ImageSource DisableImageSource
    {
        get { return (ImageSource) GetValue(DisableImageSourceProperty); }
        set { SetValue(DisableImageSourceProperty, value); }
    }

    public static readonly DependencyProperty EnableImageSourceProperty =
        DependencyProperty.Register("EnableImageSource", typeof (ImageSource), typeof (ButtonWithImage), new PropertyMetadata(default(ImageSource)));

    public ImageSource EnableImageSource
    {
        get { return (ImageSource) GetValue(EnableImageSourceProperty); }
        set { SetValue(EnableImageSourceProperty, value); }
    }


    public ButtonWithImage()
    {
        this.DefaultStyleKey = typeof (Button);

    }
}
于 2013-09-26T18:05:14.427 回答
1

您可以对图像和文本进行简单的绑定。

对于您的示例:

<Button name="buttonTest">
                <Button.Content>
                    <Grid>
                        ...omitted...
                        <Image x:Name="ContentImageHolder" Source="{Binding ElementName=buttonTest, Path=IsEnabled, Converter ={StaticResource convertButton}}" Grid.Row="0" />
                        <TextBlock x:Name="ContentTextBlock"  Text="My Sample Text" Grid.Row="1" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" Foreground="{StaticResource PhoneForegroundBrush}" TextAlignment="Center"/>
                    </Grid>

然后,您将创建一个转换器,该转换器将接收 True 或 False(启用或未启用)作为值,然后在每个状态下返回您想要的图像。

您的转换器可能类似于

  public class ButtonImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {


            if((bool) value)
return  CreateImage("pack://application:,,,/ButtonEnabled.ico"); // url should be correct
else  return  CreateImage("pack://application:,,,/ButtonDisable.ico");

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return null;
        }

        /// <summary>
        /// Method to create an image to bind to icons in treeview
        /// </summary>
        /// <param name="uriToImage">uri to image in folder.</param>
        /// <returns>a bitmap image to bind to image source in tree view</returns>
        private BitmapImage CreateImage(string uriToImage)
        {
            if (!string.IsNullOrEmpty(uriToImage))
            {
                BitmapImage genericBitmap = new BitmapImage();
                genericBitmap.BeginInit();
                genericBitmap.UriSource = new Uri(uriToImage);
                genericBitmap.EndInit();
                return genericBitmap;
            }

            return null;

        }
    }

对于文本,如果它依赖于任何属性,您也可以这样做。

于 2013-09-26T15:48:11.077 回答