如何使用 IValueConverter 接口在 Windows 商店应用程序中制作货币转换器？答案

【问题标题】：how to make a currency converter in windows store app using IValueConverter interface?如何使用 IValueConverter 接口在 Windows 商店应用程序中制作货币转换器？
【发布时间】：2017-06-16 10:20:08
【问题描述】：

我正在开发货币转换器 Windows 商店应用程序。我以前做过一个，但这很简单。只需从文本框中获取价值（巴基斯坦卢比），然后使用在另一个使用 IValueConverter 接口的类中完成的硬代码将其转换为美元。
现在我正在尝试制作一个更高级的版本。我希望用户在 TextBox 中输入值，然后他/她将从两个 ListBoxes 中选择两种不同的货币（分别从 From 和 To。）然后他/她将按下转换按钮两个将值从一种货币转换为另一种货币。
这里的问题是我应该如何获取 TextBox 的值，从这些 ListBox 中检测 ListItems 的选择，确定货币汇率并进行转换？

我显然是在添加屏幕截图和代码。请查看它们并尝试解决我的问题。

屏幕截图

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();

在MainPage.xaml.cs 下InitializeComponent();，此代码块使用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 接口。已经在 convert 方法中的代码是一种静态转换方法。我想按照上面的说明进行编辑。

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

【问题讨论】：

我正在尝试让熟悉该主题的人参与进一步测试。感谢您的耐心等待，因为可能会有一些延迟。
非常感谢。我正在等待有人帮助我。

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

【解决方案1】：

这里的问题是我应该如何获取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，它允许您稍后调整您的应用程序以适应全球市场上的其他文化和语言。

【讨论】：