如何使用IValueConverter接口在Windows应用商店中制作货币转换器?

时间:2017-01-31 04:45:20

标签: c# xaml listbox windows-runtime windows-store-apps

我正在使用货币转换器Windows商店应用。我以前做了一个,但这很简单。只需从TextBox中获取值(在巴基斯坦卢比中)并使用在另一个使用IValueConverter接口的类中完成的硬编码将其转换为美元。 现在我试图制作更高级的版本。我希望用户在TextBox中输入值,然后他/她将从两个ListBox中选择两种不同的货币(分别来自From和To),之后他/她将按下Convert按钮两个将Value From One Currency转换为另一种货币货币。
这里的问题是我应该如何获取TextBox的值,从那些ListBox中检测ListItems的选择,确定货币汇率并转换?

我显然在添加ScreenShots和Code。请看看它们并尝试解决我的问题。

截图 Application Main Screen

XAML代码

<Page.TopAppBar>
        <CommandBar Background="#2ecc71"
                    IsSticky="True"
                    IsOpen="True"
                    BorderBrush="White"
                    Height="80">
            <AppBarButton Name="App"
                          Content="App"
                          Icon="Page"/>
            <AppBarButton Name="Settings"
                          Content="Settings"
                          Icon="Setting"/>
        </CommandBar>
    </Page.TopAppBar>
    <Grid Background="#2ecc71">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="8*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="8*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Name="AppOuterContainer"
                    Grid.Row="1"
                    Grid.Column="1"
                    Width="auto"
                    Height="auto">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Name="Heading"
                           Text="Enter a value to convert."
                           Grid.Row="0"
                           Grid.Column="1"
                           HorizontalAlignment="Center"
                           Height="40"
                           FontFamily="Segoe Ui Light"
                           FontWeight="Light"
                           FontSize="32"
                           Margin="10"/>
                <TextBox Name="ValueInput"
                         Width="500"
                         Height="60"
                         FontFamily="Segoe Ui Light"
                         FontWeight="Bold"
                         FontSize="26"
                         HorizontalAlignment="Center"
                         Grid.Row="1"
                         Grid.Column="1"/>
                <TextBlock Text="From"
                           Grid.Row="2"
                           Grid.Column="1"
                           HorizontalAlignment="Center"
                           Height="40"
                           FontFamily="Segoe Ui Light"
                           FontWeight="Light"
                           FontSize="32"
                           Margin="10"/>
                <ListView Name="FromContainer" ItemsSource="{Binding}"
                          Grid.Row="3"
                          Grid.Column="1"
                          Width="500"
                          Height="65"
                          HorizontalAlignment="Center">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="2*"/>
                                        <ColumnDefinition Width="6*"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Source="{Binding FlagImg}"
                                           Width="auto"
                                           Height="60"

                                           Grid.Column="0" Stretch="Fill"/>
                                    <StackPanel Width="auto"
                                                Height="60"
                                                Grid.Column="1">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <TextBlock Name="CountryName"
                                                       Text="{Binding Name}"
                                                       Grid.Row="0"
                                                       FontFamily="Segoe Ui Light"
                                                       FontWeight="Bold"
                                                       FontSize="28"
                                                       Margin="10 0 0 0"
                                                       Foreground="White"/>
                                            <TextBlock Name="Currency"
                                                       Text="{Binding Currency}"
                                                       Grid.Row="1"
                                                       FontFamily="Segoe Ui Light"
                                                       FontWeight="Light"
                                                       FontSize="22"
                                                       Margin="10 0 0 0"
                                                       Foreground="White"/>
                                        </Grid>
                                    </StackPanel>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <TextBlock Text="To"
                           Grid.Row="4"
                           Grid.Column="1"
                           HorizontalAlignment="Center"
                           Height="40"
                           FontFamily="Segoe Ui Light"
                           FontWeight="Light"
                           FontSize="32"
                           Margin="10"/>
                <ListView Name="ToContainer" ItemsSource="{Binding}"
                          Grid.Row="5"
                          Grid.Column="1"
                          Width="500"
                          Height="65"
                          HorizontalAlignment="Center">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="2*"/>
                                        <ColumnDefinition Width="6*"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Source="{Binding FlagImg}"
                                           Width="auto"
                                           Height="60"

                                           Grid.Column="0" Stretch="Fill"/>
                                    <StackPanel Width="auto"
                                                Height="60"
                                                Grid.Column="1">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="*"/>
                                            </Grid.RowDefinitions>
                                            <TextBlock Name="CountryName"
                                                       Text="{Binding Name}"
                                                       Grid.Row="0"
                                                       FontFamily="Segoe Ui Light"
                                                       FontWeight="Bold"
                                                       FontSize="28"
                                                       Margin="10 0 0 0"
                                                       Foreground="White"/>
                                            <TextBlock Name="Currency"
                                                       Text="{Binding Currency}"
                                                       Grid.Row="1"
                                                       FontFamily="Segoe Ui Light"
                                                       FontWeight="Light"
                                                       FontSize="22"
                                                       Margin="10 0 0 0"
                                                       Foreground="White"/>
                                        </Grid>
                                    </StackPanel>
                                </Grid>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <Button Name="ConvertBtn"
                        Content="Convert"
                        Width="200"
                        Height="60"
                        Margin="10"
                        Background="White"
                        Foreground="#2ecc71"
                        FontFamily="Segoe Ui Light"
                        FontSize="28"
                        Grid.Row="6"
                        Grid.Column="1"
                        HorizontalAlignment="Center"/>
                <TextBlock Name="Result"
                           Text="Result"
                           FontFamily="Segoe Ui Light"
                           FontSize="28"
                           FontWeight="Light"
                           HorizontalAlignment="Center"
                           Margin="10"
                           Grid.Row="7"
                           Grid.Column="1"/>
            </Grid>
        </StackPanel>
    </Grid>

MainPage.xaml.cs代码

new Countries("Pakistan", "Pakistani Rupee", "ms-appx:///Assets/pk.png");
            new Countries("USA", "US Dollar", "ms-appx:///Assets/us.png");
            new Countries("Saudi Arabia", "Saudi Rayal", "ms-appx:///Assets/sa.png");
            new Countries("England", "Euro", "ms-appx:///Assets/gb.png");

            FromContainer.DataContext = Countries.getAllCountries();
            ToContainer.DataContext = Countries.getAllCountries();

在InitializeComponent();下的MainPage.xaml.cs中,此代码块使用Binding将国家/地区列表添加到ListBoxes。

Countries.cs代码

public static ObservableCollection<Countries> Country = new ObservableCollection<Countries>();

        public String Name { get; set; }
        public String Currency { get; set; }
        public String FlagImg { get; set; }


        public Countries(){

        }

        public Countries(String name,String currency,String Flag)
        {
            Countries ob = new Countries();
            ob.Name = name;
            ob.Currency = currency;
            ob.FlagImg = Flag;

            Country.Add(ob);
        }

        public static  ObservableCollection<Countries> getAllCountries()
        {


             return Country;
        }

可存储国家数据的可观察集合(可供选择的选项)。

Currency.cs代码

public object Convert(object value, Type targetType, object parameter, string language)
        {
            double pkr;
            double dollar = 0.0;
            if (double.TryParse(value.ToString(), out pkr))
            {
                dollar = pkr * 0.0099;
            }
            return dollar;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }

此类实现IValueConverter接口。已经在转换方法中的代码是一种静态转换方法。我想按照我上面的说法编辑这个。

谢谢你的时间。如果我的问题中有任何错误或遗漏,请明确告诉我。 请勿将其标记为重复,因为我已经尝试了另一种解决方案,但这不是我的要求。

1 个答案:

答案 0 :(得分:0)

  

这里的问题是我应该如何获得TextBox的值,检测   从那些ListBox中选择ListItem,

您可以在ViewModel中处理它们:

<强> XAML

<TextBox Text="{Binding InputText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
<ListView ItemsSource="{Binding Items}" SelectedItem="{Binding FromCountry,Mode=TwoWay}"/>

<强> MainPage.xaml.cs中

public class MainViewModel: INotifyPropertyChanged
    {
        private string inputText;
        public string InputText
        {
            get { return inputText; }
            set
            {
                if (inputText != value)
                {
                    inputText = value;
                    PropertyChanged(this, new PropertyChangedEventArgs("InputText"));
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }



 public sealed partial class MainPage : Page
    {
        MainViewModel ViewModel;

        public MainPage()
        {
            this.InitializeComponent();
            ViewModel = new Currency_Converter.MainViewModel();
            this.DataContext = ViewModel;
        }

    }
  

确定货币汇率并转换?

IValueConverter不适用于您的情况。您可以将两种选定的货币统一为相同的货币(例如美元),并将它们存储在本地数据库中。

顺便说一句,我检查你的代码,发现你似乎根据你的喜好显示货币。您最好使用global-ready formats,这样您就可以在以后针对全球市场中的其他文化和语言调整您的应用。