0

Quiero crear una Columna donde tenga un convertidor que recibe letras (V, A, R) desde una base de datos pero muestre una ellipse de color Verde, Amarillo o Rojo dependiendo. Tengo mi columna creada asi:

DataGridTextColumn col = new DataGridTextColumn()
            {
                Binding = new Binding("Status")
                {
                    Converter = new EllipseStatusConverter()
                },
                Width = new DataGridLength(1, DataGridLengthUnitType.Star),
                ElementStyle = new Style(typeof(Ellipse))
                {
                    Setters = {
                        new Setter(WidthProperty, 20.0),
                        new Setter(HeightProperty, 20.0),
                        new Setter(Shape.StrokeProperty, App.Negro),
                        new Setter(Shape.StrokeThicknessProperty, 0.5),
                        new Setter(MarginProperty, new Thickness(0, 0, 5, 0))
                    }
                },
                EditingElementStyle = new Style(typeof(TextBox))
                {
                    Setters = {
                        new Setter(PaddingProperty, new Thickness(5, 2, 5, 2)),
                        new Setter(TextBox.TextAlignmentProperty, TextAlignment.Center),
                        new Setter(TextBox.TextWrappingProperty, TextWrapping.Wrap),
                        new Setter(VerticalAlignmentProperty, VerticalAlignment.Center)
                    }
                },
                FontSize = 20,
                SortDirection = null
            };

Donde EllipseStatusConverter es:

public class EllipseStatusConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            switch (value.ToString())
            {
                case "V":
                    return App.Verde;
                case "A":
                    return App.Amarillo;
                case "R":
                    return App.Rojo;
                default:
                    return App.GrisOscuro;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            switch (value)
            {
                case App.VerdeStr:
                    return "V";
                case App.AmarilloStr:
                    return "A";
                case App.RojoStr:
                    return "R";
                default:
                    return "I";
            }
        }
    }

Me gustaria saber como puedo especificar cual de las propiedades de la ellipse que quiero que se muestre es la que participara en el converter ya que tal y como lo tengo hecho quiero que me devuelva el color de fondo (Fill) de la Ellipse a mostrar.

Me salta esta excepción: El TargetType 'Ellipse' no coincide con el tipo de elemento 'TextBlock'.

El convertBack lo tengo para luego al leer el datagrid saber de que color es la ellipse ya que al ser una base de datos necesito luego cambiar el valor si el usario lo ha editado.

1
  • Deberías usar una DataGridTemplateColumn y definirle el template que buscas en lugar de DataGridTextColumn Commented el 26 ago. 2019 a las 15:17

1 respuesta 1

1

Creo que lo estás complicando innecesariamente, para mostrar alguna característica que no es out of the box es decir, el componente tal y como viene por defecto se deben usar Plantillas o Templates para poder adaptar cómo se muestra el elemento de acuerdo a nuestras necesidades (Label, ComboBox, DateTimePicker, etc).

Ahora bien, en tu caso estoy modificando la vista de la Celda (CellTemplate) y tiene un trigger por cada valor que especificaste (V, A, R).

Para mostrar la lista de resultados que obtienes de tu base de datos la agrupas como lista o colección de modelos, setea la variable en ItemsSource de la lista yo lo llamé RESULTS como puedes ver.

El valor de DisplayMemberBinding es la propiedad de tu modelo o clase objeto:

<ListView Name="LstTask" BorderBrush="#212121" BorderThickness="1" 
          SelectionMode="Single" AlternationCount="2"
          ItemsSource="{Binding RESULTS}"
          ScrollViewer.CanContentScroll="True"
          VirtualizingStackPanel.IsVirtualizing="True"
          VirtualizingStackPanel.VirtualizationMode="Recycling"
          IsSynchronizedWithCurrentItem="True">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="ID" Width="0" DisplayMemberBinding="{Binding ID_TASK}">
            </GridViewColumn>
            <GridViewColumn Header="Grupo" Width="0" DisplayMemberBinding="{Binding ID_GROUP}">
            </GridViewColumn>
            <GridViewColumn Header="Estado" Width="135">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Label x:Name="Txt" Content="{Binding STATUS}" Width="120" Height="35" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
                        <DataTemplate.Triggers>

                            <DataTrigger Binding="{Binding STATUS}" Value="A">
                                <Setter TargetName="Txt" Property="Foreground" Value="#212121" />
                                <Setter TargetName="Txt" Property="BorderThickness" Value="1"></Setter>
                                <Setter TargetName="Txt" Property="BorderBrush" Value="#fff"></Setter>
                                <Setter TargetName="Txt" Property="Background">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#FFC90E"/>
                                            <GradientStop Offset="0.3" Color="#FFFF00"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>

                            <DataTrigger Binding="{Binding STATUS}" Value="V">
                                <Setter TargetName="Txt" Property="Foreground" Value="#212121" />
                                <Setter TargetName="Txt" Property="BorderThickness" Value="1"></Setter>
                                <Setter TargetName="Txt" Property="BorderBrush" Value="#fff"></Setter>
                                <Setter TargetName="Txt" Property="Background">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#ccc"/>
                                            <GradientStop Offset="0.3" Color="#777"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>

                            <DataTrigger Binding="{Binding STATUS}" Value="R">
                                <Setter TargetName="Txt" Property="Foreground" Value="#212121" />
                                <Setter TargetName="Txt" Property="BorderThickness" Value="1"></Setter>
                                <Setter TargetName="Txt" Property="BorderBrush" Value="#fff"></Setter>
                                <Setter TargetName="Txt" Property="Background">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#25EB2B"/>
                                            <GradientStop Offset="0.3" Color="#3acb78"/>
                                        </RadialGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>

                        </DataTemplate.Triggers>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>

            <GridViewColumn Header="Descripción" Width="350">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Width="320" FontSize="10" Text="{Binding DETAILS}" VerticalAlignment="Center" TextWrapping="WrapWithOverflow" />
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>

        </GridView>
    </ListView.View>
</ListView>

//Clase objeto o Modelo

public class Task
{
    public int ID_TASK
    {
        get; 
        set; 
    }

    public long ID_GROUP
    {
        get;
        set;
    }

    public string DETAILS
    {
        get;
        set;
    }


    public string STATUS
    {
         get;
         set;
    }
}

El uso de nombres en Mayúscula es solamente con fines didácticos, para que no te dificulte encontrar las cosas que necesitas modificar.

Espero que te sirva.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.