Show or Hide XAML Based Data template on button click event

Question

i want to show or hide a Xaml based Data template on a button click event . How can i do that ? the data template is bounded with xml based data source Using c# WPF. Help me about this .

Answer 1

You can set in code-behind changing another style with other Data template. You must write for exaple two styles for button (one with data template), second without. And in the "event" method you changing this styles. In mail xaml file:

<Button Name="ControlButton" Style="{StaticResource buttonStyle1}" Content="Button" Click="EventButton"/>

In code-behid:

    private void EventButton(object sender, RoutedEventArgs e)
    {
        Style style = (Style)FindResource("buttonStyle2");
        ControlButton.Style = style;
    }

In App.xaml:

    <Application.Resources>
    <Style TargetType="Button" x:Key="buttonStyle1">
        <Setter Property="Foreground" Value="Yellow" />
    </Style>

    <Style TargetType="Button" x:Key="buttonStyle2">
        <Setter Property="Foreground" Value="Red" />
    </Style>
</Application.Resources>

When you clicked button you change style from buttonStyl1 to buttonStyle2

Answer 2

Ok Awais Alvi I'm putting all my code from my WPF App so:

In App.xaml:

    <Application x:Class="WpfApplication2.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         StartupUri="MainWindow.xaml">
        <Application.Resources>
            <Style TargetType="Button" x:Key="buttonStyle1">
               <Setter Property="Foreground" Value="Yellow" />
            </Style>

            <Style TargetType="Button" x:Key="buttonStyle2">
               <Setter Property="Foreground" Value="Red" />
            </Style>
         </Application.Resources>
    </Application>

In MainWindow.xaml:

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Name="ControlButton" Style="{StaticResource buttonStyle1}" Content="Button" Click="EventButton"/>
    </Grid>
</Window>

In MainWindow.xaml.cs (code-behind):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void EventButton(object sender, RoutedEventArgs e)
        {
            Style style = (Style)FindResource("buttonStyle2");
            ControlButton.Style = style;
        }
    }
}

Try copy my code in new WPF project. It must working. You've wrote that you're newest in WPF so please note that in my code, you may have another namespaces.

Answer 3

ok mchrzanski here is my code behind

    using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace App1
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        /// 
        private void EventButton(object sender, RoutedEventArgs e)
        {
            Style style = (Style)FindResource("buttonStyle2");
            ControlButton.Style = style;
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
    }
}

adn the app.xaml

<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <Application.Resources>
        <Style TargetType="Button" x:Key="buttonStyle1">
            <Setter Property="Foreground" Value="Yellow" />
        </Style>

        <Style TargetType="Button" x:Key="buttonStyle2">
            <Setter Property="Foreground" Value="Red" />
        </Style>
    </Application.Resources>
</Application>

and mainpage.xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Button Name="ControlButton" Style="{StaticResource buttonStyle1}" Content="Button" Click="EventButton"/>
    </Grid>
</Page>