lukewire129/borderlabs

WPF, Maui Border Color Loop

BorderLabs

Overview

정적인 Border를 동적으로 변경할 수 있는 다양한 시도를 통해 만들어내기 위한 저장소입니다.

Border 상속기반

1. Animation Loop Mode

• 테두리 색상 원리 BorderBrushs는 값이 업데이트 될 때마다 값에 따라 비율 조절하고 LinearGradation기반으로 만들어냈습니다
• 구현 방식 지정된 시간에 맞게 StartPoint와 EndPoint를 360도 값을 변경하며 회전하게 됩니다.

SAMPLE CODE

 <units:AnimateBorder
     AnimationType="Loop"
     BorderThickness="10"
     CornerRadius="50"
     Interval="0:0:2">
     <units:AnimateBorder.BorderBrushs>
         <x:Array Type="{x:Type SolidColorBrush}">
             <SolidColorBrush Color="Blue" />
             <SolidColorBrush Color="Red" />
             <SolidColorBrush Color="Lime" />
             <SolidColorBrush Color="Black" />
         </x:Array>
     </units:AnimateBorder.BorderBrushs>
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="100" />
             <ColumnDefinition Width="auto" />
         </Grid.ColumnDefinitions>
         <Label
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             Content="Box" />
         <Button
             Grid.Column="1 "
             Width="100"
             Height="50" />
     </Grid>
 </units:AnimateBorder>

동작 영상

WPF	MAUI
bandicam.2023-12-19.15-19-35-507.mp4	KakaoTalk_Recording_20231220_154437.mp4

2. Animation FadeInOut Mode

• 구현 방식 Border 자체를 Opacity로 제어하는 경우에는 그 안에 속한 하위 계층들 또한 Opacity 속성이 들어가기 때문에 Color값으로 지정된 컬러 -> Tranparent로 변경하는 방식으로 구현 SAMPLE CODE

<units:AnimateBorder
    AnimationType="FadeInOut"
    BorderBrush="Blue"
    BorderThickness="5"
    CornerRadius="3"
    Interval="0:0:0.5">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="auto" />
        </Grid.ColumnDefinitions>
        <Label
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Box" />
        <Button
            Grid.Column="1 "
            Width="100"
            Height="50" />
    </Grid>
</units:AnimateBorder>

동작 영상

KakaoTalk_Recording_20231221_164520.mp4