locked
[Windows 8.1] Override ListView Opacity Change

    Question

  • Hello everyone,

    In my app, I have a ListView with a data template:

    <DataTemplate>
        <Grid Opacity="{Binding Path=IsComplete, Converter={StaticResource BooleanToOpacity}}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
    
            <CheckBox Style="{StaticResource CheckBox_SubjectTaskStyle}" IsChecked="{Binding Path=IsComplete, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    
            <TextBox Name="txtTaskStatus" Style="{StaticResource TextBox_SubjectTaskStyle}" Text="{Binding Path=PlainText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    
             <Button Name="btnRemoveTask" Style="{StaticResource Button_RemoveTaskStyle}" Content="-" Click="RemoveTask" />
        </Grid>
    </DataTemplate>

    The Grid's Opacity is data-binded. If the CheckBox is checked, the Grid's opacity will be 60%, and if not, the Grid's opacity is 100%. The problem I'm experiencing is similar to the one in this thread. If I check the CheckBox, the Grid will be 60% opaque; however, once I move my mouse away from the ListViewItem or select another UI element, the opacity promptly changes back to 100% for some reason. I had this working fine in a ListBox before, but because of some issues, I have decided to move to a ListView. Everything seems to be working with the ListView except this one aspect of it.

    I've looked into the ListView and ListViewItem templates, but unfortunately I could not seem to find out what causes the opacity to constantly revert to 100%.

    Does anyone have any ideas as to what I can do to override the opacity change of the ListView/ListViewItem? Thanks in advance for any help!


    EDIT: I have found out that the issue is with the ListViewItem's template, but I'm not sure what about it is causing the issue. Out of the two default templates found here, the first one applies only to Windows 8.1. On Windows Phone 8.1, I am not experiencing the issue since I use the second template. I would like to continue using the first default template for Windows 8.1 if possible, since it has grid performance improvements.

    Wednesday, July 02, 2014 4:39 AM

Answers

  • Hi Alex,

    I'm been on vacation for a while, so please excuse the late delay.  I read the previous post regarding the problem, and it seems to be that the most outer container in the itemtemplate will get its opacity set to 100% when the mouse moves.  I am not sure if this is a bug or by-design, but a very simple workaround is to put the template into another grid which has no visual changes.  This will always have 100% opacity but the inner grid will change opacity properly.

    <Grid> <--- This is the new outermost grid.
         <Grid Opacity="{Binding Path=IsComplete, Converter={StaticResource BooleanToOpacity}}" PointerExited="Grid_PointerExited">
    ...
         </Grid>
    </Grid>



    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.


    Monday, July 14, 2014 6:04 PM
    Moderator

All replies

  • Can you post a reproduction app for me?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, July 02, 2014 7:38 PM
    Moderator
  • Hi Matt,

    Sure thing. Please download the compressed ZIP file from here: http://1drv.ms/1o9SInF

    Just something I should mention: The CustomStyles.xaml file in each project has the BaseListViewItem style, while App.xaml in the Shared project has the BaseListView style

    If you notice, after the "+" button is clicked and the checkbox that appears below is checked, the changed opacity will stay in the Windows Phone 8.1 project, while it will revert to 100% in the Windows 8.1 project.

    Thank you for your help!



    Wednesday, July 02, 2014 9:46 PM
  • Hi Matt,

    I don't like to bump topics, but have you been able to take a look at my reproduction app?

    Thanks,

    Alex

    Thursday, July 10, 2014 3:03 AM
  • Hi Alex,

    I'm been on vacation for a while, so please excuse the late delay.  I read the previous post regarding the problem, and it seems to be that the most outer container in the itemtemplate will get its opacity set to 100% when the mouse moves.  I am not sure if this is a bug or by-design, but a very simple workaround is to put the template into another grid which has no visual changes.  This will always have 100% opacity but the inner grid will change opacity properly.

    <Grid> <--- This is the new outermost grid.
         <Grid Opacity="{Binding Path=IsComplete, Converter={StaticResource BooleanToOpacity}}" PointerExited="Grid_PointerExited">
    ...
         </Grid>
    </Grid>



    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.


    Monday, July 14, 2014 6:04 PM
    Moderator