[WPF] 輪播效果，滾動塊、滾動文字

控件已封裝在自己寫的控件庫：https://github.com/LowPlayer/PP.Wpf

 

RunningText：滾動文字，支持一下屬性：

Text：顯示的文本；

Space：首尾間距，負值或NaN時，首尾間距為整個容器寬度；

Speed：滾動速度；

Direction：滾動方向，支持四個方向；

 

示范代碼：

<pp:RunningText x:Name="rt" Margin="6" Padding="12 6" Background="{DynamicResource PP.Brushes.Themes}" Foreground="{DynamicResource PP.Brushes.Themes.Foreground}"
　　　　　　　　　 Text="WPF滾動輪播文字（走馬燈效果）；可調節滾動速度、首尾間距、文字大小、顏色，以及常規的背景、邊框、內外邊距；文字不限長度、自動適應容器大小...">
    <pp:RunningText.Style>
        <Style TargetType="{x:Type pp:RunningText}">
            <Setter Property="VerticalAlignment" Value="Top" />
            <Style.Triggers>
                <Trigger Property="Direction" Value="BottomToTop">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
                <Trigger Property="Direction" Value="TopToBottom">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </pp:RunningText.Style>
</pp:RunningText>

效果動圖：

 

RunningBlock：滾動塊，繼承自ContentControl，支持放任何內容，繼承RunningText除了Text之外的其他屬性；

 

示范代碼：

<pp:RunningBlock x:Name="rb" Margin="6" Padding="12 6" Background="{DynamicResource PP.Brushes.Themes}" Foreground="{DynamicResource PP.Brushes.Themes.Foreground}">
    <pp:RunningBlock.Style>
        <Style TargetType="{x:Type pp:RunningBlock}">
            <Setter Property="VerticalAlignment" Value="Top" />
            <Style.Triggers>
                <Trigger Property="Direction" Value="BottomToTop">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
                <Trigger Property="Direction" Value="TopToBottom">
                    <Setter Property="VerticalAlignment" Value="Stretch" />
                    <Setter Property="HorizontalAlignment" Value="Left" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </pp:RunningBlock.Style>
    <StackPanel Orientation="Horizontal">
        <Path Data="{StaticResource path1}" Fill="White" Stretch="Uniform" Height="{Binding ActualHeight,ElementName=txt}" />
        <TextBlock VerticalAlignment="Center" x:Name="txt" Margin="20 0 0 0">WPF滾動塊，可調節滾動速度、首尾間距...</TextBlock>
        <Path Data="{StaticResource path2}" Fill="White" Stretch="Uniform" Margin="20 0 0 0" Height="{Binding ActualHeight,ElementName=txt}" />
    </StackPanel>
</pp:RunningBlock>

效果動圖：

 

下面展示一個外包項目--醫院門診叫號系統，展示更多的輪播滾動效果

 

這里用到了另外一個自定義控件--叫號隊列，貼一下簡短的代碼：

<DockPanel>
    <Border DockPanel.Dock="Top" Height="100" Background="{StaticResource Brushes.Theme}" TextElement.Foreground="{StaticResource Brushes.IdealForeground}">
        <DockPanel>
            <TextBlock FontSize="34" VerticalAlignment="Center" Margin="50 0" Text="{Binding HospitalName}" />
            <!--時鍾-->
            <ctrls:Clock DockPanel.Dock="Right" Margin="50 0" VerticalAlignment="Center" />
            <TextBlock FontSize="62" VerticalAlignment="Center" TextAlignment="Center" Text="{Binding Title}" />
        </DockPanel>
    </Border>
    <Border DockPanel.Dock="Bottom" Height="80" Background="{StaticResource Brushes.Theme.Hightlight}">
        <DockPanel>
            <Grid Panel.ZIndex="1">
                <Path Data="M0 0 H110 L90 24 L110 47 H0 Z" Fill="{StaticResource Brushes.Warning}" VerticalAlignment="Center" />
                <TextBlock FontSize="18" FontWeight="Bold" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-20 0 0 0">NEWS</TextBlock>
            </Grid>
            <!--滾動的文字-->
            <ctrls:CarouselText FontSize="24" Foreground="{StaticResource Brushes.IdealForeground}" Space="200" Speed="100" Margin="-20 0 0 0" Text="{Binding CarouselText}" />
        </DockPanel>
    </Border>
    <!--叫號隊列-->
    <ctrls:CallTable Style="{StaticResource Styles.CallTable}" ItemsSource="{Binding CallQueueDatas}" HeadRowHeight="80" Interval="5000" />
</DockPanel>

注：接外包項目，評論區留言聯系我