Question

好的，我到处寻找，似乎找不到回答这个问题的人。我想在UWP中自定义timepicker控件，并通过自定义我的意思是我不希望它成为一个时钟。

我需要一个允许用户滚动循环菜单的GUI，就像时间选择器一样，但我无法找到一种方法来更改timepicker控件，以便它显示除Hour /之外的其他值分/ AM-PM。我还尝试使用带有旋转木马面板和内部物品的组合框，但它没有呈现我正在寻找的效果。我真的很感激，如果有人可以A.）告诉我，如果有一种方法我可以改变时间戳，或B.）指向我的控制方向，将呈现我正在寻找的滚动/循环效果。我不需要任何人为我做我的工作，只需向正确的方向小推。

要明确我希望菜单具有与Windows警报设置器相同的效果，如果有助于视觉效果，也可以通过iPhone上的警报和时间设置器进行描绘。

Answer 1

您可以创建一个基本的手工制作控件，例如有4个列表视图。这是一个简单的例子：

<Button Content="Set localisation" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.Flyout>
            <Flyout Opened="Flyout_Opened">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                    <Grid MaxHeight="150" MinWidth="100">
                        <ListView ItemsSource="{x:Bind Degrees,Mode=OneWay}" SelectedIndex="{x:Bind SelectedDegrees,Mode=TwoWay}" >
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsStackPanel ItemsUpdatingScrollMode="KeepItemsInView" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}"/>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                    <Grid MaxHeight="150" MinWidth="100">
                        <ListView ItemsSource="{x:Bind Minutes,Mode=OneWay}" SelectedIndex="{x:Bind SelectedMinutes,Mode=TwoWay}">
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsStackPanel ItemsUpdatingScrollMode="KeepItemsInView" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}"/>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                    <Grid MaxHeight="150" MinWidth="100">
                        <ListView ItemsSource="{x:Bind Seconds,Mode=OneWay}" SelectedIndex="{x:Bind SelectedSeconds,Mode=TwoWay}">
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsStackPanel ItemsUpdatingScrollMode="KeepItemsInView" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}"/>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                    <Grid MaxHeight="150" MinWidth="100">
                        <ListView ItemsSource="{x:Bind Hundredth,Mode=OneWay}" SelectedIndex="{x:Bind SelectedHundredth,Mode=TwoWay}">
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsStackPanel ItemsUpdatingScrollMode="KeepItemsInView" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}"/>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </StackPanel>
            </Flyout>
        </Button.Flyout>
    </Button>

使用此C＃代码：

public ObservableCollection<int> Degrees = new ObservableCollection<int>
{
        0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30
};
private int selectedDegrees = 0;
public int SelectedDegrees
{
    get { return selectedDegrees; }
    set { selectedDegrees = value; PropertyChanged?.Invoke(this, new ProportyChangedEventArgs(nameof(SelectedDegrees))); }
}


public ObservableCollection<int> Minutes = new ObservableCollection<int>
{
        0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30
};
private int selectedMinutes = 0;
public int SelectedMinutes
{
    get { return selectedMinutes; }
    set { selectedMinutes = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedMinutes))); }
}


public ObservableCollection<int> Seconds = new ObservableCollection<int>
{
        0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30
};

private int selectedSeconds = 0;
public int SelectedSeconds
{
    get { return selectedSeconds; }
    set { selectedSeconds = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedSeconds))); }
}
public ObservableCollection<int> Hundredth = new ObservableCollection<int>
{
    0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30
};
private int selectedHundredth = 0;
public int SelectedHundredth
{
    get { return selectedHundredth; }
    set { selectedHundredth = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SelectedHundredth))); }
}
private async void Flyout_Opened(object sender, object e)
{
    await Task.Delay(100);
    SelectedDegrees = 5;
    SelectedMinutes = 4;
    SelectedSeconds = 3;
    SelectedHundredth = 1;
}

这是它给出的外观：

传送带

在编写这些行时，listview中没有任何循环/轮播。但是在Combobox中有一个，我会建议使用组合框而不是ListView控件。

<ComboBox ItemsSource="{x:Bind Degrees,Mode=OneWay}" SelectedIndex="{x:Bind SelectedDegrees,Mode=TwoWay}" IsDropDownOpen="True">
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <CarouselPanel />
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

在C＃/ UWP中自定义时间选择器

1 个答案:

传送带