CODEWITHSUNDEEP
wpfimagexamlalignmenthidden
Giox
Giox

Reputation: 5133

WPF dynamic image layout inside a panel

I have a datagrid, and in one of its columns I've placed a CellTemplate that contains images (little icons). These images are shown only if a certain condition is met, depending on the content of another cell.

The problem I'm facing is that even if the images are hide, the blank space is "reserved", so they are not correctly aligned all the left. Here is a printscreen to give you an idea: Image alignment problem

Currently I'm using a WrapPanel, but I've tried also with a StackPanel with horizontal orientation but the image are always positioned in their exact order/position and not aligned/shifted to the left.

Here is the code:

<DataGridTemplateColumn Header="Icons" Width="SizeToCells" IsReadOnly="True">
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <WrapPanel>
                                        <Image x:Name="myIMGa" Width="24" Height="24" Style="{StaticResource hideImgA}" Source="images\architettura.png"></Image>
                                        <Image x:Name="myIMGb" Width="24" Height="24" Style="{StaticResource hideImgB}" Source="images\geologia.png"></Image>
                                        <Image x:Name="myIMGc" Width="24" Height="24" Style="{StaticResource hideImgC}" Source="images\idraulica.png"></Image>
                                        <Image x:Name="myIMGd" Width="24" Height="24" Style="{StaticResource hideImgD}" Source="images\ambiente.png"></Image>
                                        <Image x:Name="myIMGe" Width="24" Height="24" Style="{StaticResource hideImgE}" Source="images\archeologia.png"></Image>
                                        <Image x:Name="myIMGf" Width="24" Height="24" Style="{StaticResource hideImgF}" Source="images\galleria.png"></Image>
                                        <Image x:Name="myIMGg" Width="24" Height="24" Style="{StaticResource hideImgG}" Source="images\viadotto.png"></Image>
                                        <Image x:Name="myIMGh" Width="24" Height="24" Style="{StaticResource hideImgH}" Source="images\svincolo.png"></Image>
                                        <Image x:Name="myIMGi" Width="24" Height="24" Style="{StaticResource hideImgI}" Source="images\render3d.png"></Image>
                                        <Image x:Name="myIMGl" Width="24" Height="24" Style="{StaticResource hideImgL}" Source="images\geologia2.png"></Image>
                                    </WrapPanel>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

to make them hidden I use a staticResource file with a setter:

<Style TargetType="Image" x:Key="hideImgA">
        <Style.Triggers>
                <DataTrigger Binding="{Binding hideIMGA}" Value="1">
                <Setter Property="Visibility" Value="Hidden"/>
                </DataTrigger>
        </Style.Triggers>
    </Style>

Is there a way in WPF to easily tell that images must be aligned to the left? Thanks

Upvotes: 0

Views: 172

Answers (1)

Clemens
Clemens

Reputation: 128136

Replace Visibility.Hidden by Visibility.Collapsed. Then the invisible controls do not take part in layout.

<DataTrigger Binding="{Binding hideIMGA}" Value="1">
    <Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>

Upvotes: 1

Related Questions