Пользовательский индикатор выполнения Silverlight с закругленными углами - PullRequest
Новая
       11

Пользовательский индикатор выполнения Silverlight с закругленными углами

2 голосов
/ 19 ноября 2011

Я планирую создать пользовательский индикатор выполнения, который поддерживает разделение на прогресс.Окончательный вид будет выглядеть следующим образом:

progress bar with sections

Я сравнительно новичок в разработке управления Silverlight, так что вот моя идея и вопрос:

  1. Я будуопределение структуры элемента управления в XAML как элемента ItemsControl.
  2. ItemsControl будет связано с источником данных, который будет содержать сечения стержней.
  3. ItemTemplate определитспособ рисования этих секций.

«Хитрость» заключается в том, что первая и последняя секции должны иметь левый и правый закругленные углы соответственно.Как я могу определить это ограничение, чтобы первый и последний элемент из источника были нарисованы с закругленными углами?Могу ли я сделать это в XAML или из кода.Если код, где я могу ввести логику?

1 Ответ

1 голос
/ 19 ноября 2011

Вы можете создать Список границ, взять первую и последнюю Границу из своего Списка и применить угловой радиус.

XAML: 

<Window x:Class="TestWpf.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:TestWpf="clr-namespace:TestWpf" Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <TestWpf:AchievedConverter x:Key="AchievedConverter"/>
    </Window.Resources>
    <Grid>
        <ListBox Name="listBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Bars}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border Height="10" CornerRadius="{Binding Corner}" Width="{Binding Width}" Background="{Binding IsAchieved, Converter={StaticResource AchievedConverter}}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

C #: 

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    private ObservableCollection<Bar> _bars;

    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = this;

        _bars = new ObservableCollection<Bar>();

        //Init
        _bars.Add(new Bar {Width = 20, IsAchieved = true, Corner = new CornerRadius(5, 0, 0, 5)});
        _bars.Add(new Bar {Width = 60, IsAchieved = true});
        _bars.Add(new Bar {Width = 80, IsAchieved = true});
        _bars.Add(new Bar {Width = 20, IsAchieved = false});
        _bars.Add(new Bar {Width = 50, IsAchieved = false, Corner = new CornerRadius(0, 5, 5, 0)});
    }

    public  ObservableCollection<Bar> Bars
    {
        get { return _bars; }
    }
}

public class Bar
{
    public double Width { get; set; }
    public bool IsAchieved { get; set; }
    public CornerRadius Corner { get; set; }
}

public class AchievedConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((bool)value)
            return new SolidColorBrush(Colors.Green);
        else
            return new SolidColorBrush(Colors.Red);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

enter image description here

...