Silverlight 中带数据触发器的可重用按钮
Reusable button with datatrigger in Silverlight
在我的 Windows phone 8.1 silverlight 应用程序中,用户可以 select 一个日期并移动到下一天或前一天。我想添加在未来的这一天将按钮设置为灰色的功能 select(因为它在我的应用程序中没有任何意义)。
为此我创建了一个样式来定义右箭头按钮(我也有同样的左箭头按钮,也许还有更好的方法来做?)。
<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>
我的问题是我可以有多个按钮这样操作。在我的应用程序的另一个页面中,用户可以 select 一个月,如果这个月在未来,我想禁用该按钮。
我现在所做的是复制粘贴数据触发部分并将绑定从“日”更改为“月”,但这对我来说真的感觉不对。
还有其他更好的方法吗?
使用样式转换器的方法怎么样?假设我们添加自定义 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 Style="{Binding Day, Converter={StaticResource arrowStyleConverter}, ConverterParameter=day}" />
<Button Style="{Binding Month, Converter={StaticResource arrowStyleConverter}, ConverterParameter=month}" />
在我的 Windows phone 8.1 silverlight 应用程序中,用户可以 select 一个日期并移动到下一天或前一天。我想添加在未来的这一天将按钮设置为灰色的功能 select(因为它在我的应用程序中没有任何意义)。
为此我创建了一个样式来定义右箭头按钮(我也有同样的左箭头按钮,也许还有更好的方法来做?)。
<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>
我的问题是我可以有多个按钮这样操作。在我的应用程序的另一个页面中,用户可以 select 一个月,如果这个月在未来,我想禁用该按钮。 我现在所做的是复制粘贴数据触发部分并将绑定从“日”更改为“月”,但这对我来说真的感觉不对。 还有其他更好的方法吗?
使用样式转换器的方法怎么样?假设我们添加自定义 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 Style="{Binding Day, Converter={StaticResource arrowStyleConverter}, ConverterParameter=day}" />
<Button Style="{Binding Month, Converter={StaticResource arrowStyleConverter}, ConverterParameter=month}" />