Databases
StackOverflow2013
Postsdbo
POSetting a background of button of a nested control from main page does not work in windows phone
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSetting a background of button of a nested control from main page does not work in windows phone
    text
    copied!<p>I am working on a windows phone 7.5 application. I have a custom tab bar that I am using in few of my application pages. I have created a custom control for this tab bar with 3 buttons. </p> <ol> <li><p>I have defined 3 DependencyProperties of type ImageSource to set the background of teh button from my main page where I actually use my Tabbar control. </p></li> <li><p>These 3 DependencyProperties are bound to the ImageSource properties of 3 buttons in my custom control xaml</p></li> <li><p>Then I am setting these properties from the main page where I exactly use the Bottom tab bar control.</p></li> </ol> <p>The problem is that the images can be seen on visual studio designer but not on emulator. Emulator shows black buttons.</p> <p>Below is my BottomTabBar.xaml for my tab bar control:</p> <pre><code>&lt;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"&gt; &lt;Grid x:Name="BottomTabBarGrid" Width="{Binding DesignWidth}" Height="{Binding DesignHeight}" Background="Black"&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="417*" /&gt; &lt;ColumnDefinition Width="63*" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;TextBlock Width="Auto" Text="{Binding Text}"&gt;&lt;/TextBlock&gt; &lt;Button Command="{Binding HomeButtoncommand}" x:Name="home" Height="125" Width="194" HorizontalAlignment="Left" Margin="-11,-12,0,0" VerticalAlignment="Top"&gt; &lt;Button.Background &gt; &lt;ImageBrush ImageSource="{Binding HomeButtonImage}" Stretch="Fill" /&gt; &lt;/Button.Background&gt; &lt;/Button&gt; &lt;Button Command="{Binding TripButtoncommand}" x:Name="trips" Width="172" HorizontalAlignment="Right" Margin="0,-12,85,-13" &gt; &lt;Button.Background&gt; &lt;ImageBrush ImageSource="{Binding TripButtonImage}" AlignmentX="Center" Stretch="Fill"/&gt; &lt;/Button.Background&gt; &lt;/Button&gt; &lt;Button Command="{Binding RulesButtoncommand}" x:Name="rules" Width="183" HorizontalAlignment="Right" Grid.ColumnSpan="2" Margin="0,-12,-12,-13"&gt; &lt;Button.Background&gt; &lt;ImageBrush ImageSource="{Binding RulesButtonImage}" /&gt; &lt;/Button.Background&gt; &lt;/Button&gt; &lt;/Grid&gt; &lt;/UserControl&gt; </code></pre> <p>Below is my BottomTabBar.xaml.cs of my tab bar control:</p> <pre><code>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 { /// &lt;summary&gt; /// Command Dependency Property /// &lt;/summary&gt; 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"); } } /// &lt;summary&gt; /// Command Dependency Property /// &lt;/summary&gt; 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"); } } /// &lt;summary&gt; /// Command Dependency Property /// &lt;/summary&gt; 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"); } } /// &lt;summary&gt; /// Command Dependency Property /// &lt;/summary&gt; 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"); } } /// &lt;summary&gt; /// Command Dependency Property /// &lt;/summary&gt; 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"); } } /// &lt;summary&gt; /// Command Dependency Property /// &lt;/summary&gt; 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)); } } } } </code></pre> <p>... and below is how I use this control in my page:</p> <pre><code>&lt;Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0" Background="White"&gt; &lt;TextBlock Name="locationLabel" Margin="0,0,0,0" FontSize="16" FontWeight="Black" Text="Gurgaon,Haryana" Foreground="Black"&gt;&lt;/TextBlock&gt; &lt;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" &gt;&lt;/TabBar:BottomTabBar&gt; &lt;/Grid&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload