使用绑定UWP应用显示/隐藏按钮 [英] UWP app show/hide Button using binding
问题描述
我有一个列表视图，显示了其做不同的操作，如添加注释观看影像为该项目等。根据项目的一些项目将有一些这些按钮有时被禁用的每一个项目的项目名称和一些按钮。而某些按钮会不会在某些项目中可见。因此，有两件事我想用数据在这一code的结合来实现的。
I have a List view which shows the project names and some buttons for each project which do different actions like adding a comment viewing images for that project etc.. Depending on the project some projects will have some of these buttons disabled sometimes. And some buttons will not be visible in some projects. So there are two things I want to achieve using data binding in this code.
-
根据ProjectModel一些布尔变量，我需要改变按钮的可见性。我想这<一个href=\"http://stackoverflow.com/questions/7000819/binding-a-button-visibility-to-bool-value-in-viewmodel\">Binding一个按钮可见性bool值在视图模型但它似乎并没有对UWP工作。
Depending on some boolean variables of the ProjectModel, I need to change the visibility of the buttons. I tried this Binding a Button Visibility to bool value in ViewModel but it doesn't seem to work on uwp.
对于一些项目，我需要显示不同颜色的图像时该选项被禁用。所以，我需要改变的ImageBrush的视ProjectModel的布尔变量的ImageSource。对于这个我试过使用WPF触发MVVM 改变形象和风格的触发器不工作的UWP。
For some projects I need to show a different colored image when that option is disabled. So I need to change the ImageSource of ImageBrush depending on the boolean variables of the ProjectModel. For that I tried this Change image using trigger WPF MVVM and those style triggers are not working for uwp.
请让我知道如何在UWP应用程序很容易地做到这些。这是我第UWP应用程序，我是新来的这些概念。
Please let me know how to do these easily in a UWP app. This is my first UWP app and I am new to these concepts.
<ListView x:Name="stepsListView" Margin="10,0,0,0" RequestedTheme="Dark" FontSize="24" Background="{StaticResource procedure_app_white}" Foreground="Black" BorderThickness="1.5" BorderBrush="Transparent" ItemsSource="{Binding projectList}" HorizontalAlignment="Left">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<!-- Item -->
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="#c0c0c0">
<Grid Width="auto" HorizontalAlignment="Stretch" DataContextChanged="Grid_DataContextChanged" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" FontSize="30" Grid.Row="0" Grid.ColumnSpan="7" Text="{Binding projectName}" Foreground="{StaticResource procedure_app_orange_text }" />
<Button x:Name="warningButton" Width="40" Height="40" Grid.Column="1" Grid.Row="1" Tag="{Binding projectId}" Click="warningButtonClick" Foreground="{StaticResource procedure_app_orange_text }">
<Button.Background>
<ImageBrush ImageSource="Asset/step_ncwr.png">
</ImageBrush>
</Button.Background>
</Button>
<Button x:Name="commentButton" Width="40" Height="40" Grid.Column="2" Grid.Row="1" Tag="{Binding projectId}" Click="CommentButtonClick" Foreground="{StaticResource procedure_app_orange_text }" IsTapEnabled="True">
<Button.Background>
<ImageBrush ImageSource="Asset/step_comment.png">
</ImageBrush>
</Button.Background>
</Button>
<Button x:Name="imageButton" Width="40" Height="40" Grid.Column="3" Grid.Row="1" Tag="{Binding projectId}" Click="ImageButtonClick" Foreground="{StaticResource procedure_app_orange_text }">
<Button.Background>
<ImageBrush ImageSource="Asset/step_image.png">
</ImageBrush>
</Button.Background>
</Button>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
推荐答案
的能见度属性的类型为布尔所以这就是为什么你不能绑定到直接在视图模型的布尔属性。
The Visibility property is not of type bool so that's why you cannot bind it to the Boolean property in your ViewModel directly.
您需要虽然转换器这样做。正如其名审计机关，一个转换器是一个类，它可以帮助你从一种类型转变成另一种为绑定工作。你的情况，你需要转换的布尔值真正来的能见度值可见。
You need to do so though a converter. As the name sais, a Converter is a class that helps you convert from one type to another in for Bindings to work. In your case, you need to convert a boolean value of true to a Visibility value of Visible.
有在UWP内置转换器，但我会告诉你如何创建一个，因为你可能需要写在未来的其他转换器：
There is a built-in converter in UWP but I will show you how to create one since you will probably need to write other converters in the future:
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;
namespace YourNamespace
{
public class BooleanToVisibilityConverter : IValueConverter
{
public Visibility OnTrue { get; set; }
public Visibility OnFalse { get; set; }
public BooleanToVisibilityConverter()
{
OnFalse = Visibility.Collapsed;
OnTrue = Visibility.Visible;
}
public object Convert(object value, Type targetType, object parameter, string language)
{
var v = (bool)value;
return v ? OnTrue : OnFalse;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
if (value is Visibility == false)
return DependencyProperty.UnsetValue;
if ((Visibility)value == OnTrue)
return true;
else
return false;
}
}
}
该转换器可让您的布尔值转换为可见的值，默认情况下，将转换真到 Visibility.Visible 和假到 Visibility.Collapsed ，但它是配置为您将在下面看到。
The converter allows you to convert Boolean values to Visibility values and by default will convert True to Visibility.Visible and False to Visibility.Collapsed, but it is configurable as you'll see below.
接下来，您需要声明的转换器在你的XAML。在页面或用户控件需要执行此步骤：
Next you need to declare your converter in your XAML. In the Page or UserControl you need to perform this steps:
-
声明转换器命名空间（使用创建转换器类，当你使用相同的命名空间。
Declare the converter Namespace (use the same namespace you used when creating the converter class
xmlns:converters="using:YourNamespace"
实例化转换器在你的页面/用户控件资源
Instantiate the converter in your Page / UserControl Resources
＆LT; Page.Resources＆GT;
＆LT;转换器：BooleanToVisibilityConverter X：键=bool2vis/＆GT;
＆LT;转换器：BooleanToVisibilityConverter X：键=bool2visInverseOnTrue =晕倒，OnFalse =可见/＆GT;
＆LT; /Page.Resources>
使用您的转换器，你的绑定：
Use your converter in your binding:
＆LT;按钮X：NAME =warningButtonWIDTH =40HEIGHT =40Grid.Column =1Grid.Row =1标签={结合专案编号} 点击=warningButtonClick前景={StaticResource的procedure_app_orange_text}能见度={结合ISVISIBLE，转换器= {StaticResource的bool2vis}}＆GT;
这篇关于使用绑定UWP应用显示/隐藏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
