Search code examples
c#uwpuwp-xaml

How to narrow the redundancy of button and ListView Item in UWP


I have an image button and a ListView.

For image button, I use any value of property Stretch, even UniformToFill, but the image does not cover the button.

For ListView, How to narrow top and button of listview item? I used wrap content property, but it affect nothing. My listview item just contain number, so does not need top and bottom for other character such as y ô á ị.

Here is my current result

enter image description here

enter image description here

Here is my expectation

enter image description here

enter image description here


Solution

  • The image is added as the button's content, so you can adjust the padding property of the button to set the distance of the inner image from the border.

    This image control is filled with Stretch="Fill", and the width and height are consistent with the button.

    <Button Padding="0,0" x:Name="btnTest"  VerticalAlignment="Top" Width="300" Height="300">
        <Image Source="Assets/Test.png" Height="{Binding ElementName=btnTest, Path=Height}" 
               Width="{Binding ElementName=btnTest, Path=Width}" Stretch="Fill" />
    </Button>
    

    EDIT

    The padding property of TextBlock cannot be set to a negative number, so you got an error.

    I did a quick test and hope it meets your needs. I modified the Property of ListViewItem Style Padding to {0, 0} and set the MinHeight to 0.

    <Page.Resources>
        <Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
            <Setter Property="MinWidth" Value="{StaticResource SplitViewCompactPaneThemeLength}"/>
            <Setter Property="MinHeight" Value="0"/>
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="UseSystemFocusVisuals" Value="False" />
        </Style>
    </Page.Resources>
    
     <ListView Width="200">
           <ListViewItem Style="{StaticResource ListViewItemStyle1}" Background="Red" Content="2023/09/05 11:06" />
           <ListViewItem Style="{StaticResource ListViewItemStyle1}" Background="Red" Content="2023/09/05 11:06" />
           <ListViewItem Style="{StaticResource ListViewItemStyle1}" Background="Red" Content="2023/09/05 11:06" />
           <ListViewItem Style="{StaticResource ListViewItemStyle1}" Background="Red" Content="2023/09/05 11:06" />
           <ListViewItem Style="{StaticResource ListViewItemStyle1}" Background="Red" Content="2023/09/05 11:06" />
    </ListView>
    

    enter image description here