Search code examples
c#wpfxamltextblock

Designing a WPF control that has an expandable TextBlock

I'm trying to develop a WPF control that has a TextBlock in it. This control will be displayed in a DataTemplate for an ItemsControl. In this control, I want the control by default to have a fixed height (let's say 150 to set a baseline). The TextBlock will trim its content based on how many pixels are available. I also have an "Expand" button that I want to have the behavior of expanding that textbox to be the desired height to have all the text display without any trimming.

I have the trimming detection working as long as my TextBlock height is not constrained, based on the code here. It seems I may have to go down the custom control route and override Arrange and Measure but I was hoping I could solve this with just XAML.

My ViewModel will have an IsExpanded property that the ToggleTextExpansionCommand command will toggle when executed. I'm not sure what I should be doing on my IsExpanded trigger, though, to make the TextBlock expand to take up all the room it needs.

My DataTemplate right now looks as follows:

<DataTemplate>
    <Grid Height="140">
        <Grid.RowDefinitions>
            <!-- other rows exist -->
            <RowDefinition Height=*" /> <!-- textblock row -->
        </Grid>

        <!-- other content -->
        <TextBlock x:Name="MyTextBlock" Grid.Row="2" Text="{Binding MyText}" />

        <Button x:Name="ExpanderButton" Command="{Binding ToggleTextExpansionCommand}" Visibility="Collapsed" />
    </Grid>

    <DataTemplate.Triggers>
        <Trigger SourceName="MyTextBlock" Property="Controls:TextBlockServices.IsTextTrimmed" Value="True">
            <Setter TargetName="ExpanderButton" Property="Visibility" Value="Visible" />
        </Trigger>
        <DataTrigger Binding="{Binding IsExpanded}" Value="True">
            <!-- what do I do here?? -->
        </DataTrigger>
    </DataTemplate.Triggers />
</DataTemplate>
Solution

  • The answer was provided by sa_ddam213. If he updates this question with an answer, I'll mark it as correct. Basically the containing Grid that has a height of 140 would have a height set to Auto.