Silverlight中带有datatrigger的可重用按钮

时间:2015-01-28 12:28:37

标签: xaml silverlight windows-phone-8

在我的Windows phone 8.1 silverlight应用程序中,用户可以选择日期并移至下一天或前一天。我想添加灰色按钮的功能,以选择将来这一天的第二天(因为它在我的应用程序中没有任何意义)。

为此,我创建了一个样式来定义右箭头按钮(左箭头我也有相同的颜色,也可以有更好的方法吗?)。

 <Style TargetType="Button" x:Key="arrowRight" BasedOn="{StaticResource RemoveButtonBorderStyle}">
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Path Stretch="Uniform"
                        RenderTransformOrigin="0.5,0.5"
                        Margin="2,6,2,2"
                        Fill="{StaticResource PhoneContrastBackgroundBrush}"
                        Data="M0,0L496.000005990267,315 0,630z">
                        <Path.RenderTransform>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                        </Path.RenderTransform>
                    </Path>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我按下了这样的按钮:

  <Button Grid.Row="0" HorizontalAlignment="Left" VerticalContentAlignment="Center" HorizontalContentAlignment="Left"  Grid.Column="2"  Command="{Binding NextMonthCommand}"  Style="{StaticResource arrowRight}">

                        <i:Interaction.Triggers>
                            <ec:DataTrigger Binding="{Binding Day,Converter={StaticResource IsNextDayInTheFutureConverter }}" Value="True">
                                <ec:ChangePropertyAction PropertyName="Opacity" Value="0.2"/>
                                <ec:ChangePropertyAction PropertyName="IsEnabled" Value="False"/>
                            </ec:DataTrigger>
                            <ec:DataTrigger Binding="{Binding Day,Converter={StaticResource IsNextDayInTheFutureConverter }}" Value="False">
                                <ec:ChangePropertyAction PropertyName="Opacity" Value="1"/>
                                <ec:ChangePropertyAction PropertyName="IsEnabled" Value="True"/>
                            </ec:DataTrigger>
                        </i:Interaction.Triggers>
                    </Button>

我的问题是我可以有多个这样的按钮。在我的应用程序的另一个页面中,用户可以选择一个月,如果月份是将来,我想要禁用该按钮。 我现在做的是复制粘贴datatrigger部分并从一天到另一个月更改绑定,但它对我来说并不是真正的感觉。 还有另一种更好的方法吗?

My control

1 个答案:

答案 0 :(得分:0)

使用Style转换器的方法怎么样?假设我们添加自定义Converter

public class ArrowBtnStyleConverter : IValueConverter
{
   public Style EnabledStyle { get; set; }
   public Style DisabledStyle { get; set; }

   public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   {
      //put your conversion logic here instead of that nonsense.
      //You can also check 'parameter' to switch between day/month/etc modes
      return value != null ? EnabledStyle : DisabledStyle;
   }

   public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
   {
      throw new NotImplementedException();
   }
}

然后在XAML中使用它。请注意,两种样式的BasedOn都使用箭头样式。

<local:ArrowBtnStyleConverter x:Key="arrowStyleConverter">
    <local:ArrowBtnStyleConverter.EnabledStyle>
        <Style TargetType="Button" BasedOn="{StaticResource arrowRight}">
            <!-- You don't actually need those default values set explicitly.
                 I just leave them here to show that we could have some more options -->    
            <!--<Setter Property="IsEnabled" Value="True" />
            <Setter Property="Opacity" Value="1" />-->
        </Style>
    </local:ArrowBtnStyleConverter.EnabledStyle>
    <local:ArrowBtnStyleConverter.DisabledStyle>
        <Style TargetType="Button" BasedOn="{StaticResource arrowRight}">
            <Setter Property="IsEnabled" Value="False" />
            <Setter Property="Opacity" Value="0.2" />
        </Style>
    </local:ArrowBtnStyleConverter.DisabledStyle>
</local:ArrowBtnStyleConverter>

之后,我们只需绑定Button的样式。再次注意转换器参数的使用。有了它你可以根据输入(日,月,年等)改变逻辑的单个转换器,你只需要检查转换器代码中的参数。

<Button Style="{Binding Day, Converter={StaticResource arrowStyleConverter}, ConverterParameter=day}" />
<Button Style="{Binding Month, Converter={StaticResource arrowStyleConverter}, ConverterParameter=month}" />