Search code examples
c#wpflistviewtextbox

WPF make a streched TextBlock shrink when window is resized


I have a list that shows details of a files. I designed ItemTemplate to stretch DirectoryName TextBox when window is resized.

<ListView ItemsSource="{Binding LogFolderContent}" SelectedItem="{Binding SelectedLogFile}" HorizontalContentAlignment="Stretch">
    <ListView.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <TextBlock Text="{Binding LastWriteTime" DockPanel.Dock="Right"/>
                <TextBlock Text="{Binding Name}" DockPanel.Dock="Left"/>
                <TextBlock Text="{Binding DirectoryName}" DockPanel.Dock="Left" Margin="10,0,10,0"/>
            </DockPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

This works as expected. window wide

Unfortunately when DirectoryName is very long, or window is resized the LastWriteTime disappears from view.

window narrow

I would very much like to always show LastWriteTime and to do that I would like shrink the TextBlock to not display left part of the DirectoryName in a way that doesn't involve any sidebars.

Is it possible?


Solution

  • Apparently all I had to do is to disable the ScrollViewer that's part of the ListView control, and change HorizontalAlignment to Right for the DirectoryName to Disappear from the left side when window was resized.

    <ListView ItemsSource="{Binding LogFolderContent}" SelectedItem="{Binding SelectedLogFile}" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <ListView.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <TextBlock Text="{Binding LastWriteTime}" DockPanel.Dock="Right"/>
                    <TextBlock Text="{Binding Name}" DockPanel.Dock="Left"/>
                    <TextBlock Text="{Binding DirectoryName}" HorizontalAlignment="Right" DockPanel.Dock="Left" Margin="10,0,10,0"/>
                </DockPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    and it looks like this now:

    correct window small