WPF seriál 17. díl – Range Controls

Poslední články

WPF seriál 17. díl – Range Controls – ProgressBar, Slider

V této kapitole se seznámíme s „Range Controls“ mezi které patří ProgressBar a Slider.

ProgressBar

Element ProgressBar se nachází téměř ve všech aplikacích a většinou nemá žádnou speciální funkcionalitu. Slouží především pro zobrazení stavu nějaké akce, např. kopírování, atd. Mezi základní vlastnosti patří následující:

Minimum – minimální hodnota, které může ProgressBar nabývat. Default je 0
Maximum – maximální hodnota, které může ProgressBar nabývat. Default je 100
Orientation – orientace ProgressBaru
IsIndeterminate – pokud se ProgressBar nachází ve stavu kdy např. nevíme kolik ještě chybí do konce, můžeme zobrazit průběh jako souvislou animaci

Slider

Slider je dost podobný ProgressBaru akorát umožňuje vstup od uživatele. Rovněž nabízí několik zajímavých vlastností.

Minimum – minimální hodnota, které může Slider nabývat, Default je 0
Maximum – maximální hodnota, které může Slider nabývat. Default je 10
Orientation – orientace Slideru. Default je Horizontall
IfSelectionRangeEnabled – pokud je tato vlastnost nastavena na true a vlastnosti SelectionStart a SelectionEnd mají konkrétní hodnotu, můžeme celkový rozsah Slideru rozdělit na 2 části. První část bude celý rozsah a druhá část může být část tohoto rozsahu např. od 1 do 3. Např. když sledujete video na internetu, tak vidíte aktuální pozici a množství, které je už staženo

Na následující ukázce se podíváme na ProgressBar a Slider dohromady

XAML

<Window x:Class="RangeControls.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>
        <CheckBox x:Name="chbIsIndeterminate" Content="IsIndeterminate" Margin="5" 
                  Checked="chbIsIndeterminate_Checked" Unchecked="chbIsIndeterminate_Checked"/>
        <CheckBox x:Name="chbIsSelectionRangeEnabled" Margin="5" Grid.Column="1"
                  Content="IsSelectionRangeEnabled" Checked="chbIsSelectionRangeEnabled_Checked" 
                  Unchecked="chbIsSelectionRangeEnabled_Checked"/>
        <Label Grid.Row="1" Content="Minimum:"/>
        <TextBox Grid.Row="1" x:Name="txtMin" HorizontalAlignment="Right" Width="60" Margin="5" TextChanged="txtMin_TextChanged"/>
        <Label Grid.Row="2" Content="Maximum:"/>
        <TextBox Grid.Row="2" x:Name="txtMax" HorizontalAlignment="Right" Width="60" Margin="5" TextChanged="txtMax_TextChanged"/>
        <Label Grid.Row="1" Grid.Column="1" Content="Start:"/>
        <TextBox Grid.Row="1" Grid.Column="1" x:Name="txtStart" HorizontalAlignment="Right" Width="60" Margin="5" TextChanged="txtStart_TextChanged"/>
        <Label Grid.Row="2" Grid.Column="1" Content="Stop:"/>
        <TextBox Grid.Row="2" Grid.Column="1" x:Name="txtStop" HorizontalAlignment="Right" Width="60" Margin="5" TextChanged="txtStop_TextChanged"/>
        <Slider x:Name="sl" Grid.Row="3" Grid.ColumnSpan="2" Margin="5" ValueChanged="sl_ValueChanged"
                TickPlacement="BottomRight" Maximum="100"/>
        <ProgressBar x:Name="pb" Grid.Row="4" Grid.ColumnSpan="2" Margin="5"/>
    </Grid>

</Window>

Kód na pozadí

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void sl_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
    {
        pb.Value = sl.Value;
    }

    private void chbIsIndeterminate_Checked(object sender, RoutedEventArgs args)
    {
        pb.IsIndeterminate = ( bool ) (sender as CheckBox).IsChecked;
    }

    private void chbIsSelectionRangeEnabled_Checked(object sender, RoutedEventArgs args)
    {
        sl.IsSelectionRangeEnabled = ( bool ) (sender as CheckBox).IsChecked;
        if ( sl.IsSelectionRangeEnabled )
            txtStop.IsEnabled = txtStart.IsEnabled = true;
        else
            txtStop.IsEnabled = txtStart.IsEnabled = false;
    }

    private void txtMin_TextChanged(object sender, TextChangedEventArgs e)
    {
        double min;
        if ( double.TryParse(txtMin.Text, out min) )
        {
            pb.Minimum = min;
            sl.Minimum = min;
        }
    }

    private void txtMax_TextChanged(object sender, TextChangedEventArgs e)
    {
        double max;
        if ( double.TryParse(txtMax.Text, out max) )
        {
            pb.Maximum = max;
            sl.Maximum = max;
        }
    }

    private void txtStart_TextChanged(object sender, TextChangedEventArgs e)
    {
        double start;
        if ( double.TryParse(txtStart.Text, out start) )
        {
            sl.SelectionStart = start;
        }
    }

    private void txtStop_TextChanged(object sender, TextChangedEventArgs e)
    {
        double end;
        if ( double.TryParse(txtStop.Text, out end) )
        {
            sl.SelectionEnd = end;
        }
    }

}

Po spuštění aplikace máme hned několik možností jak si vyzkoušet funkcionalitu již zmiňovaných Range Controls. Nejdříve můžeme zaškrtnout možnost IsIndeterminate a hned se můžeme podívat, jak se zachová náš ProgressBar. Dále můžeme nastavit nové hodnoty pro Minimum a Maximum Slideru a ProgressBaru. Jestliže budeme chtít zvýraznit určitou část Slideru, zaškrtneme tlačítko IsSelectionRangeEnabled a nastavíme vlastnosti Start a End na konkrétní hodnoty. Např. 35 a 50.