= $u_time + 86400) { $modifiedDate = get_the_modified_time('F jS, Y'); echo 'Última modificación: '.$modifiedDate.''; } }?>

Deshabilitar items de una lista en Windows

Alguna vez puede surgir la necesidad de que, dada una lista cuyos items son seleccionables, sea necesario deshabilitar algunos para que el usuario no pueda seleccionarlos.

Vamos a partir de una ViewModel que contiene una Lista de elementos de tipo “Movie”, cuyos atributos son Título y un bool Alquilado. Si la película esta alquilada  no debe poder seleccionarse, en caso contrario debe estar habilitado.

Para empezar vamos a crear 2 DataTemplates: una para los elementos habilitados y otra para los elementos deshabilitados:

<Page.Resources>
         <DataTemplate x:Key="ItemTemplateForEnabledCustomer">
            <StackPanel DataContext="{Binding}"
                        Orientation="Horizontal"
                        Background="Orange"
                        Width="500">
                <Image Margin="10"
                       Source="ms-appx:///Icons/bluray.png"
                       Width="100"
                       Height="100" />
                <TextBlock Margin="10"
                           Text="{Binding Title}"
                           Foreground="White" />
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="ItemTemplateForDisabledCustomer">
            <StackPanel DataContext="{Binding}"
                        Orientation="Horizontal"
                        Background="White"
                        Width="500">
                <Image Margin="10"
                       Source="ms-appx:///Icons/bluray.png"
                       Width="100"
                       Height="100" />
                <TextBlock Margin="10"
                           Text="{Binding Title}"
                           Foreground="Gray" />
            </StackPanel>
        </DataTemplate>
    <!--- declaración del selector -->
</Page.Resources>

 

Ahora vamos a sobreescribir el método:

 protected override DataTemplate SelectTemplateCore(object item,DependencyObject container)

de la clase

DataTemplateSelector” (para más información  MSDN)

donde implementaremos la lógica que decidirá si el elemento de la lista es o no seleccionable:

internal class SelectionStatesForAlist : DataTemplateSelector
    {
        #region Public Properties

        public DataTemplate AvailableTemplate
        {
            get;
            set;
        }
        
        public DataTemplate UnavailableTemplate
        {
            get;
            set;
        }

        #endregion

        #region Protected Methods

        protected override DataTemplate SelectTemplateCore(object item,DependencyObject container)
        {
            var movie = item as Movie;
            var selectorItem = container as SelectorItem;

            if(selectorItem == null || movie == null)
            {
                return this.UnavailableTemplate;
            }
            if(movie.Rented)
            {
                selectorItem.IsEnabled = false;
                return this.UnavailableTemplate;
            }
            return this.AvailableTemplate;
        }

        #endregion
    }

 

A continuación debemos declarar nuestro “Selector de Plantilla”:

<utilities:SelectionStatesForAlist x:Key="MovieDataTemplateSelector"
    AvailableTemplate="{StaticResource ItemTemplateForEnabledCustomer}"
    UnavailableTemplate="{StaticResource ItemTemplateForDisabledCustomer}" />

 

Finalmente asignamos al atributo “ItemTemplateSelector” nuestro recurso:

<GridView HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  SelectedItem="{Binding SelectedMovie, Mode=TwoWay}"
                  ItemTemplateSelector="{StaticResource MovieDataTemplateSelector}"
                  ItemsSource="{Binding List,Mode=TwoWay}"
                  ItemContainerStyle="{StaticResource GridViewItemStyle}">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal"
                              MaximumRowsOrColumns="1" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

 

Unos últimos trucos:

Al deshabilitar un item por defecto se vuelve traslucido, para modificar esta propiedad habrá que modificar el estilo del “ItemContainer”; lo podemos hacer desde Blend de una forma muy sencilla:

disabledOpacity03

 

Y, finalmente, cambiar el color del check cuando seleccionamos un elemento:

disabledOpacity04

 

 

En el siguiente link os podeis descargar el ejemplo: DisabledItemsInAlistApp

Leave a Reply

Your email address will not be published. Required fields are marked *