c# - oculto - Aplicación UWP mostrar/ocultar el botón utilizando enlace

ocultar y mostrar panel c#

Question

Tengo una vista de lista que muestra los nombres de los proyectos y algunos botones para cada proyecto que hacen diferentes acciones, como agregar un comentario, ver imágenes para ese proyecto, etc. Dependiendo del proyecto, algunos proyectos tendrán algunos de estos botones desactivados a veces. Y algunos botones no serán visibles en algunos proyectos. Entonces, hay dos cosas que quiero lograr usando el enlace de datos en este código.

1. Dependiendo de algunas variables booleanas de ProjectModel, necesito cambiar la visibilidad de los botones. Intenté esta función de vincular la visibilidad de un botón a un valor bool en ViewModel, pero parece que no funciona en uwp.

2. Para algunos proyectos, necesito mostrar una imagen de color diferente cuando esa opción está desactivada. Entonces necesito cambiar ImageSource de ImageBrush dependiendo de las variables booleanas de ProjectModel. Para eso, probé esta imagen de cambio usando el disparador WPF MVVM y los disparadores de estilo no funcionan para uwp.

Por favor, hágamelo saber cómo hacer esto fácilmente en una aplicación UWP. Esta es mi primera aplicación UWP y soy nuevo en estos conceptos.

<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>

Answer 1

Así que creo que lo que vas a querer hacer es modificar la plantilla del botón.

Si miras el artículo de MSDN sobre estilos de botones y Tempaltes , verás el estilo de botón predeterminado.

Dentro de este estilo predeterminado verás esto

 <VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

¿Ves dónde está desactivado? Todo dentro de aquí define cómo se ve el botón cuando está deshabilitado. Investigaría cómo reescribir un botón y luego meterme con este estilo.

Comience aquí Estilos personalizados Xaml en UWP

Answer 2

La propiedad Visibility no es de tipo bool por eso no se puede vincular directamente a la propiedad Boolean en su ViewModel.

Debes hacerlo a través de un convertidor. Como el nombre lo dice, un convertidor es una clase que te ayuda a convertir de un tipo a otro en para que Bindings funcione. En su caso, debe convertir un valor booleano de true a un valor de visibilidad de Visible .

Hay un convertidor incorporado en UWP, pero le mostraré cómo crear uno, ya que probablemente necesite escribir otros convertidores en el futuro:

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;
}
}
}

El convertidor le permite convertir valores booleanos a valores de Visibilidad y, de forma predeterminada, convertirá de True a Visibility.Visible y False a Visibility.Collapsed . Visibility.Collapsed , pero se puede configurar como verá a continuación.

A continuación, debe declarar su convertidor en su XAML. En la página o UserControl, debe seguir estos pasos:

1. Declare el espacio de nombres del convertidor (use el mismo espacio de nombres que utilizó al crear la clase de convertidor)

   xmlns:converters="using:YourNamespace"

2. Crea una instancia del convertidor en tu página / UserControl Resources

   <Page.Resources> <converters:BooleanToVisibilityConverter x:Key="bool2vis"/> <converters:BooleanToVisibilityConverter x:Key="bool2visInverse" OnTrue=Collapsed, OnFalse=Visible/> </Page.Resources>

3. Use su convertidor en su encuadernación:

   <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 }" Visibility="{Binding IsVisible, Converter={StaticResource bool2vis}}">