Question

I’m in the process of creating a control to represent a employee work shift. The shift can be of different lengths and with none or more breaks.

Mockup prototype GUI of a 9 hour work shift with an 1 hour break

The following questions refer to the blue bar in the prototype:
Since the control need to resize perfectly, then a fixed size approach is not an option. My first thought was to use a grid with columns that has the same width ratio as the time spans. So if you look at the prototype above there would be 3 columns with a width of: 240*, 60*, 240*. These numbers are equal to the total minutes of each time span.

If I add a dependency property that hold, lets call them TimeSpanItems (TSI). Each TSI has a TimeSpan property. Is it then possible to bind this to the grid and its column definitions? The number of columns must change as TSI are added and also each column must change its width ratio to match the number of minutes.

Am I thinking about this the wrong way? Is it doable? Or is it a items control that I need that resizes its items when the control is resized?

At the moment I have different questions that I yet haven’t found the answer to… and probably a lot of questions that I don’t know yet what they are. Any help would be most welcome.

Answer 1

I’m going to answer the question: Is it doable? My initial thought was that I didn’t want the calculate the resizing. I wanted a grid to solve this for me. So I am going to ignore all the other questions regarding if this should be another control type or if this the “right” way to do it.

Here goes… first I use a control template where the uxMainContentGrid is the grid that is going to be modified when items are added.

<Style TargetType="{x:Type wpflib:RatioPresenterControl}">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type wpflib:RatioPresenterControl}">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Height="{TemplateBinding Height}"
                    Width="{TemplateBinding Width}">

                <Grid x:Name="uxMainContentGrid">
                    <Grid.ColumnDefinitions>
                        <!-- Columns and ratio is set in code behind -->
                    </Grid.ColumnDefinitions>
                </Grid>
            </Border>
        </ControlTemplate>
    </Setter.Value>
</Setter>

The items that I used to set the width ratio look like this.

Public Class RatioItem
    Public Property Value As Double
    Public Property Brush As Brush
End Class

And the RatioItems are added through this dependency property with a default value of an empty list of RatioItems.

 Public Shared ReadOnly RatioItemsProperty As DependencyProperty = _
        DependencyProperty.Register("RatioItems", GetType(IEnumerable(Of RatioItem)),
              GetType(RatioPresenterControl),
              New FrameworkPropertyMetadata(New List(Of RatioItem), AddressOf OnRatioItemsPropertyChanged))

The dependency property that has the following value changed callback method. When you bind to the dependency property, then this callback fires before the template has been applied. This callback only reconstructs the grid columns if the control template has been set.

Public Shared Sub OnRatioItemsPropertyChanged(sender As Object, e As DependencyPropertyChangedEventArgs)
    If (_MainContentGrid IsNot Nothing) Then
        Dim ratioItems As IEnumerable(Of RatioItem) = TryCast(e.NewValue, IEnumerable(Of RatioItem))

        ReconstructGridColumns(ratioItems, _MainContentGrid)
    End If
End Sub

The following code retrieves the grid when the control template is applied. The thing here is to store the grid so that it can be accessed later if the RatioItems property change. When the template is applied the binding is already in affect so the grid columns are constructed.

Public Overrides Sub OnApplyTemplate()
    MyBase.OnApplyTemplate()

    _MainContentGrid = TryCast(Me.Template.FindName("uxMainContentGrid", Me), Grid)

    ReconstructGridColumns(Me.RatioItems, _MainContentGrid)
End Sub

This method does all the “constructing”…

Private Shared Sub ReconstructGridColumns(ByVal ratioItems As IEnumerable(Of RatioItem), ByVal mainContentGrid As Grid)
    Dim newContent As Rectangle
    Dim columnCount As Integer = 0

    mainContentGrid.ColumnDefinitions.Clear()

    For Each item In ratioItems
        mainContentGrid.ColumnDefinitions.Add(New ColumnDefinition() With {.Width = New GridLength(item.Value, GridUnitType.Star)})
        newContent = New Rectangle() With {.Name = "item" & columnCount, .Fill = item.Brush}
        mainContentGrid.Children.Add(newContent)
        Grid.SetColumn(newContent, columnCount)
        columnCount += 1
    Next
End Sub

And there you have it. It can be done. Now to the discussion whether it is the “right” way to do it… 🙂