Home/ Questions/Q 6685853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:06:18+00:00

I have a grid, and I need to have a control as background of

  • 0

I have a grid, and I need to have a control as background of this grid. This control will be a progressbar, but it’s my problem how to create it.

I can’t find how can I set a control as background of grid.

Have you got any experience with this kind of problem?

    <DataTemplate x:Key="TodoItemWeeklyTemplate">
        <Grid MinWidth="800" Background="Transparent">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Image Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Occurrence.Appointment.Icon, Converter={StaticResource imgConverter}}" Width="16" Height="16" Stretch="Fill" />
            <TextBlock Grid.Column="1" HorizontalAlignment="Left" MaxWidth="130" Text="{Binding Occurrence.Appointment.Subject}" />

        </Grid>
    </DataTemplate>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is how I would do it:-

        <Grid MinWidth="800">
        <Rectangle x:Name="Background" Fill="Green" Width="{Binding PercentDone, Converter={StaticConverter WidthConv}, ConverterParameter=800}" HorizontalAlignment="Left" />
        <Grid Background="Transparent"> 

            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="Auto" /> 
                <ColumnDefinition Width="*" /> 
            </Grid.ColumnDefinitions> 

            <Grid.RowDefinitions> 
                <RowDefinition Height="*" /> 
            </Grid.RowDefinitions> 

            <Image Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Source="{Binding Occurrence.Appointment.Icon, Converter={StaticResource imgConverter}}" Width="16" Height="16" Stretch="Fill" /> 
            <TextBlock Grid.Column="1" HorizontalAlignment="Left" MaxWidth="130" Text="{Binding Occurrence.Appointment.Subject}" /> 

        </Grid>
    </Grid>

    Where WidthConv is an instance of a class added to the usercontrol resources that implements IValueConverter. The Convert method would take the input percentage value and apply it to the parameter to return the width the rectangle needs to be to represents that percentage value.

    The important point here is that Grid naturaly overlays elements on each other when the occupy the same area.

    • 0