從數據庫到Expanderviewer的圖像

Question

嘗試將sqlite數據庫中的圖像添加到expanderviewer中。 代碼將圖像以字節的形式從db中拉出，然后將其轉換為BitmapImage。 所有這些都可以工作，因為可以在expanderviewer外部的imageview中查看圖片。

但是，只有大的空白區域會出現在圖像應該在expanderviewer中的位置。

我將C＃和XAML的示例放在下面。

任何幫助將非常感激。

    public partial class CarExpander : PhoneApplicationPage
    {    
        ObservableCollection<Cars_Out_Table> _carEntries = null;
        static BitmapImage BmImage = new BitmapImage();
        static BitmapImage BmImage2 = new BitmapImage();

        // Constructor
        public CarExpander()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            string strSelectCar2 = "SELECT Championship_ID,Car_ID,Driver_Name,Team_Name FROM Cars_Table ORDER BY Championship_ID, Car_ID";
            _carEntries = (Application.Current as App).db.SelectObservableCollection<Cars_Out_Table>(strSelectCar2);

            foreach (Cars_Out_Table data in _carEntries)
            {
                string strSelectCar = "SELECT Car_Picture FROM Cars_Table where Car_ID="+data.Car_ID;
                (Application.Current as App).db.SimpleQuery<Cars_Table>(strSelectCar);

                new Cars_Out_Table() { Championship_ID = data.Championship_ID, Car_ID = data.Car_ID, Driver_Name = data.Driver_Name, Team_Name = data.Team_Name, Car_Picture=bytetoimage()};
            }
            ListCars.DataContext = typeof(Cars_Out_Table);
            ListCars.ItemsSource = _carEntries;   
        }

        private static BitmapImage bytetoimage()
        {
            var isoStore = IsolatedStorageFile.GetUserStoreForApplication();
            using (MemoryStream ms = new MemoryStream(GlobalVariables.picByte, 0, GlobalVariables.picByte.Length))
            {
                ms.Write(GlobalVariables.picByte, 0, GlobalVariables.picByte.Length);
                BmImage.SetSource(ms);
                return BmImage;
            }
        }
    }


 <ListBox x:Name="ListCars">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListBox.ItemContainerStyle>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <toolkit:ExpanderView x:Name="Expander" Margin="0,0,0,8" Header="{Binding ''}" Expander="{Binding ''}" ItemsSource="{Binding}"  >
                            <toolkit:ExpanderView.HeaderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Driver_Name}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="{StaticResource PhoneAccentBrush}" />
                                </DataTemplate>
                            </toolkit:ExpanderView.HeaderTemplate>
                            <toolkit:ExpanderView.ExpanderTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Championship_ID}"/>
                                </DataTemplate>
                            </toolkit:ExpanderView.ExpanderTemplate>
                            <StackPanel Margin="0,0,0,0" Width="300">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Car Number:"/>
                                    <TextBlock Text="{Binding Car_ID}"/>
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Team Name:"/>
                                    <TextBlock Text="{Binding Team_Name}"/>
                                </StackPanel>
                            </StackPanel>
                            <Image Visibility="Visible" Margin="172,10,116,428">
                                <Image.Source>
                                    <BitmapImage  UriSource="{Binding Car_Picture}"/>
                                </Image.Source>
                            </Image>
                        </toolkit:ExpanderView>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

Answer 1

問題解決了！

無需嘗試在傳遞到圖像框之前進行轉換，而是創建一個處理轉換的類，並在source屬性的converter屬性中引用該類。

XAML：

<Grid.Resources>
            <local:ByteToImageConverter x:Key="BinaryConverter"/>
        </Grid.Resources>
<Image Source= "{Binding Car_Picture, Converter={StaticResource BinaryConverter}}" />

C＃：

public class ByteToImageConverter : IValueConverter
    {
        public BitmapImage ConvertByteArrayToBitMapImage(byte[] imageByteArray)
        {
            BitmapImage img = new BitmapImage();
            using (MemoryStream memStream = new MemoryStream(imageByteArray))
            {
                img.SetSource(memStream);
            }
            return img;
        }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            BitmapImage img = new BitmapImage();
            if (value != null)
            {
                img = this.ConvertByteArrayToBitMapImage(value as byte[]);
            }
            return img;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }