how to make an button not visible when the image is also not visable in datagrid

i have an requirment based on the value 0,1 i am showing the image.

if the value is 0 i am not showing the image.

if the value is 1 i am showing the image.

but here when i am not showing the image for the row. i want even the button to be not shown?

now i need even the button not to be shown when image is not shown. on that row

how can i solve this issue

link to show how the screen shot

this is my xaml code. its works

<Button x:Name="myButton"  
                            Click="myButton_Click">
                                <StackPanel Orientation="Horizontal">
                                    <Image Margin="2, 2, 2, 2"  x:Name="imgMarks"  Stretch="Fill" Width="12" Height="12"
                                           Source="Images/detail.JPG"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="Center"
                                        Visibility="{Binding Level, Converter开发者_运维百科={StaticResource LevelToVisibility}}"
                                     />


                                </StackPanel>
                            </Button>

this is my xaml code

<UserControl x:Class="SLGridImage.MainPage"
    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"
   xmlns:sdk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
   xmlns:local="clr-namespace:SLGridImage"

    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" >

    <UserControl.Resources>
       <local:LevelToVisibilityConverter x:Key="LevelToVisibility" />
    </UserControl.Resources>


    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid x:Name="dgMarks"  CanUserResizeColumns="False"  SelectionMode="Single"
               AutoGenerateColumns="False"
                      VerticalAlignment="Top"
                      ItemsSource="{Binding MarkCollection}"
                      IsReadOnly="True" 
                      Margin="13,44,0,0"
                      RowDetailsVisibilityMode="Collapsed" Height="391"
                      HorizontalAlignment="Left" Width="965"
                      VerticalScrollBarVisibility="Visible" >
            <sdk:DataGrid.Columns>
                <sdk:DataGridTemplateColumn>
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button x:Name="myButton"  
                            Click="myButton_Click">
                                <StackPanel Orientation="Horizontal">
                                    <Image Margin="2, 2, 2, 2"  x:Name="imgMarks"  Stretch="Fill" Width="12" Height="12"
                                           Source="Images/detail.JPG"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="Center"
                                        Visibility="{Binding Level, Converter={StaticResource LevelToVisibility}}"
                                     />


                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
                <sdk:DataGridTemplateColumn  Header="Name" >
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate >
                            <Border>
                                <TextBlock Text="{Binding Name}" />
                            </Border>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>

                <sdk:DataGridTemplateColumn  Header="Marks" Width="80">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Border>
                                <TextBlock Text="{Binding Marks}" />
                            </Border>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
    </Grid>
</UserControl>

 in .cs  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.Collections.ObjectModel;
using System.ComponentModel;

namespace SLGridImage
{
    public partial class MainPage : UserControl
    {
        private MarksViewModel model = new MarksViewModel();
        public MainPage()
        {
            InitializeComponent();
            this.DataContext = model;

        }

        private void myButton_Click(object sender, RoutedEventArgs e)
        {

        }



    }

    public class MarksViewModel : INotifyPropertyChanged
    {

        public MarksViewModel()
        {

            markCollection.Add(new Mark() { Name = "ABC", Marks = 23, Level = 0 });
            markCollection.Add(new Mark() { Name = "XYZ", Marks = 67, Level = 1 });
            markCollection.Add(new Mark() { Name = "YU", Marks = 56, Level = 0 });
            markCollection.Add(new Mark() { Name = "AAA", Marks = 89, Level = 1 });

        }


        private ObservableCollection<Mark> markCollection = new ObservableCollection<Mark>();
        public ObservableCollection<Mark> MarkCollection
        {
            get { return this.markCollection; }
            set
            {
                this.markCollection = value;
                OnPropertyChanged("MarkCollection");
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propName)
        {
            if (PropertyChanged != null)
                this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }

    }

    public class Mark
    {
        public string Name { get; set; }
        public int Marks { get; set; }
        public int Level { get; set; }
    }

    public class LevelToVisibilityConverter : System.Windows.Data.IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Visibility isVisible = Visibility.Collapsed;
            if ((value == null))
                return isVisible;
            int condition = (int)value;
            isVisible = condition == 1 ? Visibility.Visible : Visibility.Collapsed;
            return isVisible;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }


}

looking for an solution .please help me out

thanks

prince

Use element binding to bind to the Visibility property on the image:

<Button x:Name="myButton" Visibility={Binding Visibility, ElementName=imgMarks} Click="myButton_Click" >

Edit: i just reviewed your XAML and realised that the image was the button content - why don't you move this line:

Visibility="{Binding Level, Converter={StaticResource LevelToVisibility}}"

up to the button instead of having it on the image?