Better fading

Mårten Åsberg committed on 2026-06-10 at 14:30

src/App/Styles/MainStyles.axaml +0 -14

diff --git a/src/App/Styles/MainStyles.axaml b/src/App/Styles/MainStyles.axaml
index 452e244..fa9ab73 100644
@@ -10,18 +10,4 @@
    <Style Selector="TextBlock.h3">
        <Setter Property="FontSize" Value="16"/>
    </Style>
    <Style Selector=":is(Control).fade">
        <Setter Property="Opacity" Value="0.5" />
        <Setter Property="RenderTransform" Value="translateY(10px)" />
        <Setter Property="Transitions">
            <Transitions>
                <DoubleTransition Property="Opacity" Duration="{StaticResource FadeInDuration}" Easing="{StaticResource FadeInEasing}" />
                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FadeInDuration}" Easing="{StaticResource FadeInEasing}" />
            </Transitions>
        </Setter>
    </Style>
    <Style Selector=".active :is(Control).fade">
        <Setter Property="Opacity" Value="1" />
        <Setter Property="RenderTransform" Value="translateY(0px)" />
    </Style>
</Styles>

src/App/Views/MainView.axaml +36 -8

diff --git a/src/App/Views/MainView.axaml b/src/App/Views/MainView.axaml
index 400da15..5ab241c 100644
@@ -9,13 +9,41 @@
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>
    <UserControl.Styles>
        <Style Selector="Grid.fade">
            <Setter Property="RenderTransform" Value="translateY(10px)" />
            <Setter Property="Transitions">
                <Transitions>
                <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FadeInDuration}" Easing="{StaticResource FadeInEasing}" />
                </Transitions>
            </Setter>
        </Style>
        <Style Selector=".active Grid.fade">
            <Setter Property="RenderTransform" Value="translateY(0px)" />
        </Style>
        <Style Selector="Rectangle">
            <Setter Property="Opacity" Value="0.95" />
            <Setter Property="Transitions">
                <Transitions>
                    <DoubleTransition Property="Opacity" Duration="{StaticResource FadeInDuration}" Easing="{StaticResource FadeInEasing}" />
                </Transitions>
            </Setter>
        </Style>
        <Style Selector=".active Rectangle">
            <Setter Property="Opacity" Value="0" />
        </Style>
    </UserControl.Styles>
    <Grid Classes.active="{Binding FaceNear}" RowDefinitions="*,*,*" ColumnDefinitions="*,*,*" Margin="64">
        <ContentControl Classes="fade" Grid.Row="0" Grid.Column="0" Content="{Binding Weather}" />
        <StackPanel Classes="fade" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Grid.IsSharedSizeScope="True" Spacing="8">
            <ContentControl Content="{Binding Olskrokstorget}" />
            <ContentControl Content="{Binding Svingeln}" />
        </StackPanel>
        <ContentControl Classes="fade" Grid.Row="0" Grid.Column="2" Content="{Binding UpperRight}" />
    </Grid>
    <Panel Classes.active="{Binding FaceNear}" Margin="64">
        <Grid Classes="fade" ColumnDefinitions="*,*,*">
            <StackPanel Grid.Column="0" Grid.IsSharedSizeScope="True" Spacing="8">
                <ContentControl Content="{Binding Weather}" />
                <ContentControl Content="{Binding Olskrokstorget}" />
                <ContentControl Content="{Binding Svingeln}" />
            </StackPanel>
            <ContentControl Grid.Column="2" Content="{Binding UpperRight}" />
        </Grid>
        <Rectangle Fill="#000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="False" />
    </Panel>
</UserControl>

src/App/Views/Panels/DateTimePanel.axaml +1 -1

diff --git a/src/App/Views/Panels/DateTimePanel.axaml b/src/App/Views/Panels/DateTimePanel.axaml
index 7e04639..f767741 100644
@@ -17,7 +17,7 @@
    </UserControl.Resources>
    <UserControl.Styles>
        <Style Selector="StackPanel#clock">
            <Setter Property="RenderTransform" Value="{Binding #seconds.DesiredSize.Width, Converter={StaticResource translateXConverter}}" />
            <Setter Property="RenderTransform" Value="{Binding #seconds.Bounds.Width, Converter={StaticResource translateXConverter}}" />
            <Setter Property="Transitions">
                <Transitions>
                    <TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FadeInDuration}" Easing="{StaticResource FadeInEasing}" />

src/App/Views/Panels/SmhiPanel.axaml +1 -5

diff --git a/src/App/Views/Panels/SmhiPanel.axaml b/src/App/Views/Panels/SmhiPanel.axaml
index 352fb56..3a3f785 100644
@@ -26,11 +26,7 @@
        </Style>
        <Style Selector="Svg">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="CurrentColor" Value="rgba(255, 255, 255, 0.5)" />
        </Style>
        <Style Selector=".active Svg">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="CurrentColor" Value="rgba(255, 255, 255, 1)" />
            <Setter Property="CurrentColor" Value="#ffffff" />
        </Style>
    </UserControl.Styles>
    <StackPanel Spacing="16">