私はWindows Phone 7.5アプリケーションに取り組んでいます。アプリケーション ページのいくつかで使用しているカスタム タブ バーがあります。このタブ バーの 3 つのボタンを持つカスタム コントロールを作成しました。
タイプ ImageSource の 3 つの DependencyProperties を定義して、実際に Tabbar コントロールを使用するメイン ページからボタンの背景を設定しました。
これらの 3 つの DependencyProperties は、カスタム コントロール xaml の 3 つのボタンの ImageSource プロパティにバインドされています。
次に、Bottom タブ バー コントロールを正確に使用するメイン ページからこれらのプロパティを設定しています。
問題は、ビジュアル スタジオ デザイナーでは画像が表示されますが、エミュレーターでは表示されないことです。エミュレーターに黒いボタンが表示されます。
以下は、私のタブ バー コントロールの BottomTabBar.xaml です。
<UserControl x:Class="SafeCell.Views.BottomTabBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="100" d:DesignWidth="480">
<Grid x:Name="BottomTabBarGrid" Width="{Binding DesignWidth}" Height="{Binding DesignHeight}" Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="417*" />
<ColumnDefinition Width="63*" />
</Grid.ColumnDefinitions>
<TextBlock Width="Auto" Text="{Binding Text}"></TextBlock>
<Button Command="{Binding HomeButtoncommand}" x:Name="home" Height="125" Width="194" HorizontalAlignment="Left" Margin="-11,-12,0,0" VerticalAlignment="Top">
<Button.Background >
<ImageBrush ImageSource="{Binding HomeButtonImage}" Stretch="Fill" />
</Button.Background>
</Button>
<Button Command="{Binding TripButtoncommand}" x:Name="trips" Width="172" HorizontalAlignment="Right" Margin="0,-12,85,-13" >
<Button.Background>
<ImageBrush ImageSource="{Binding TripButtonImage}" AlignmentX="Center" Stretch="Fill"/>
</Button.Background>
</Button>
<Button Command="{Binding RulesButtoncommand}" x:Name="rules" Width="183" HorizontalAlignment="Right" Grid.ColumnSpan="2" Margin="0,-12,-12,-13">
<Button.Background>
<ImageBrush ImageSource="{Binding RulesButtonImage}" />
</Button.Background>
</Button>
</Grid>
</UserControl>
以下は、私のタブ バー コントロールの BottomTabBar.xaml.cs です。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Windows.Data;
using System.Windows.Media.Imaging;
namespace SafeCell.Views
{
public partial class BottomTabBar : UserControl,INotifyPropertyChanged
{
/// <summary>
/// Command Dependency Property
/// </summary>
private static DependencyProperty mTripButtonImage= DependencyProperty.Register("TripButtonImage", typeof(ImageSource), typeof(BottomTabBar),new PropertyMetadata(null));
public ImageSource TripButtonImage
{
get
{
return (ImageSource)GetValue(mTripButtonImage);
}
set
{
SetValue(mTripButtonImage, value);
NotifyPropertyChanged("TripButtonImage");
}
}
/// <summary>
/// Command Dependency Property
/// </summary>
private static DependencyProperty mHomeButtonImage = DependencyProperty.Register("HomeButtonImage", typeof(ImageSource), typeof(BottomTabBar), new PropertyMetadata(null));
public ImageSource HomeButtonImage
{
get
{
return (ImageSource)GetValue(mHomeButtonImage);
}
set
{
SetValue(mHomeButtonImage, value);
NotifyPropertyChanged("HomeButtonImage");
}
}
/// <summary>
/// Command Dependency Property
/// </summary>
private static DependencyProperty mRulesButtonImage = DependencyProperty.Register("RulesButtonImage", typeof(ImageSource), typeof(BottomTabBar), new PropertyMetadata(null));
public ImageSource RulesButtonImage
{
get
{
return (ImageSource)GetValue(mRulesButtonImage);
}
set
{
SetValue(mRulesButtonImage, value);
NotifyPropertyChanged("RulesButtonImage");
}
}
/// <summary>
/// Command Dependency Property
/// </summary>
public static readonly DependencyProperty mTripButtoncommand =
DependencyProperty.Register("TripButtoncommand", typeof(ICommand), typeof(BottomTabBar),
new PropertyMetadata(null));
public ICommand TripButtoncommand
{
get
{
return (ICommand)GetValue(mTripButtoncommand);
}
private set
{
SetValue(mTripButtoncommand, value);
// NotifyPropertyChanged("TripButtoncommand");
}
}
/// <summary>
/// Command Dependency Property
/// </summary>
public static readonly DependencyProperty mHomeButtoncommand =
DependencyProperty.Register("HomeButtoncommand", typeof(ICommand), typeof(BottomTabBar),
new PropertyMetadata(null));
public ICommand HomeButtoncommand
{
get
{
return (ICommand)GetValue(mHomeButtoncommand);
}
private set
{
SetValue(mHomeButtoncommand, value);
// NotifyPropertyChanged("HomeButtoncommand");
}
}
/// <summary>
/// Command Dependency Property
/// </summary>
public static readonly DependencyProperty mRulesButtoncommand =
DependencyProperty.Register("RulesButtoncommand", typeof(ICommand), typeof(BottomTabBar),
new PropertyMetadata(null));
public ICommand RulesButtoncommand
{
get
{
return (ICommand)GetValue(mRulesButtoncommand);
}
private set
{
SetValue(mRulesButtoncommand, value);
// NotifyPropertyChanged("RulesButtoncommand");
}
}
// ImageBrush mTripActiveImage;
//ImageBrush mTripInActiveImage;
//ImageBrush mHomeActiveImage;
///ImageBrush mHomeInActiveImage;
//ImageBrush mRulesActiveImage;
//ImageBrush mRulesInActiveImage;
public BottomTabBar()
{
try
{
InitializeComponent();
BottomTabBarGrid.DataContext = this;
//if (mTripActiveImage == null)
//{
// mTripActiveImage = new ImageBrush();
// mTripInActiveImage = new ImageBrush();
// mTripActiveImage.ImageSource = new BitmapImage(new Uri("/SafeCell;component/ImgResources/menu-my-trip-active.png", UriKind.RelativeOrAbsolute));
// mTripInActiveImage.ImageSource = new BitmapImage(new Uri("/SafeCell;component/ImgResources/menu-my-trip.png", UriKind.RelativeOrAbsolute));
//}
//if (mHomeActiveImage == null)
//{
// mHomeActiveImage = new ImageBrush();
// mHomeInActiveImage = new ImageBrush();
// mHomeActiveImage.ImageSource = new BitmapImage(new Uri("/SafeCell;component/ImgResources/menu-home-active.png", UriKind.RelativeOrAbsolute));
// mHomeInActiveImage.ImageSource = new BitmapImage(new Uri("/SafeCell;component/ImgResources/menu-home.png", UriKind.RelativeOrAbsolute));
//}
//if (mRulesActiveImage == null)
//{
// mRulesActiveImage = new ImageBrush();
// mRulesInActiveImage = new ImageBrush();
// mRulesActiveImage.ImageSource = new BitmapImage(new Uri("/SafeCell;component/ImgResources/menu-rules-active.png", UriKind.RelativeOrAbsolute));
// mRulesInActiveImage.ImageSource = new BitmapImage(new Uri("/SafeCell;component/ImgResources/menu-rules.png", UriKind.RelativeOrAbsolute));
//}
//ImageBrush imageBrush = new ImageBrush();
//Uri uri = new Uri("/SafeCell;component/ImgResources/menu-my-trip-active.png", UriKind.RelativeOrAbsolute);
//imageBrush.ImageSource = new BitmapImage(uri);
//this.myTrip.Background = imageBrush;
// trips.Click += new RoutedEventHandler(trips_Click);
}
catch (Exception ex)
{
}
}
void trips_Click(object sender, RoutedEventArgs e)
{
// trips.Background = mTripActiveImage;
// home.Background = mHomeInActiveImage;
// rules.Background = mRulesInActiveImage;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(String propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
...そして以下は、私のページでこのコントロールを使用する方法です:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" Background="White">
<TextBlock Name="locationLabel" Margin="0,0,0,0" FontSize="16" FontWeight="Black" Text="Gurgaon,Haryana" Foreground="Black"></TextBlock>
<TabBar:BottomTabBar HomeButtonImage ="/SafeCell;component/ImgResources/menu-home.png" RulesButtonImage="/SafeCell;component/ImgResources/menu-rules.png" TripButtonImage="/SafeCell;component/ImgResources/menu-my-trip.png" RulesButtoncommand="{Binding AppRulesTabCmd}" HomeButtoncommand="{Binding AppHomeTabCmd}" TripButtoncommand="{Binding AppTripsTabCmd}" Height="76" VerticalAlignment="Bottom" ></TabBar:BottomTabBar>
</Grid>