How to change the form while resizing less or more than specific width and height?

Question

Hello guys I want to build a scientific calculator using C# WPF.

What I want to do is to change the form from simple calculator to scientific calculator by resizing the UI size less or more than a specific size(with specific width and height).

Is there any articles or some examples about this feature?

Thank you very much.

I want to specify my idea:

Like the calculator on IPhone, when I rotate the screen the calculator will be in scientific mode, so that's what I want for the windows program when I drag to resize the calculator, the mode will be changed.

Answer 1

This one might get flagged because it's not very clear what you're asking. If I understand the question right then you need to remove the width and height parameters from your window and set WindowStyle, SizeToContent and ResizeMode:

<Window x:Class="GuiTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Calculator"
    WindowStyle="SingleBorderWindow"
    SizeToContent="WidthAndHeight"
    ResizeMode="NoResize" FontSize="20">

<StackPanel Orientation="Vertical">
    <Border BorderBrush="Black" BorderThickness="1" Background="LightGray" HorizontalAlignment="Stretch" Height="60" Margin="5" >
        <TextBlock Text="0" TextAlignment="Right" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="5" FontSize="40" />
    </Border>
    <UniformGrid Columns="4">
        <UniformGrid.Resources>
            <Style TargetType="Button" >
                <Setter Property="Margin" Value="5" />
                <Setter Property="Width" Value="60" />
                <Setter Property="Height" Value="60" />
            </Style>
        </UniformGrid.Resources>
        <Button Content="CE" />
        <Button Content="C" />
        <Button Content="&lt;" />
        <Button Content="÷" />
        <Button Content="7" />
        <Button Content="8" />
        <Button Content="9" />
        <Button Content="x" />
        <Button Content="4" />
        <Button Content="5" />
        <Button Content="6" />
        <Button Content="-" />
        <Button Content="1" />
        <Button Content="2" />
        <Button Content="3" />
        <Button Content="+" />
        <Button Content="±" />
        <Button Content="0" />
        <Button Content="." />
        <Button Content="=" />
    </UniformGrid>
</StackPanel>

The result is a window that sizes automatically to the content and can't be resized:

UPDATE:

Oh ok, that's very different then :) There are actually quite a few ways to do that, I'll provide a simple one that doesn't do MVVM or anything. What you need to do is add control templates tp your window's resources section, one for each mode and a child control to display them:

<Window.Resources>

    <ControlTemplate x:Key="Standard">
        <TextBlock Text="Standard Mode" />
    </ControlTemplate>

    <ControlTemplate x:Key="Scientific">
        <TextBlock Text="Scientific Mode" />
    </ControlTemplate>

</Window.Resources>

<ContentControl x:Name="myPanel" />

Then you need to add a SizeChanged handler that looks at the new size and selects the appropriate template for the control to use:

    private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (e.NewSize.Width > e.NewSize.Height)
            this.myPanel.Template = this.Resources["Scientific"] as ControlTemplate;
        else
            this.myPanel.Template = this.Resources["Standard"] as ControlTemplate;
    }

Drag the window around and you'll see the control's appearance change accordingly.

Answer 2

As I understood your question,

You want to display simple and scientific calculator in a single form. and there would some option.. say button.. which will turn/off scientific calc to simple calc.

So create two panels..

panel 1>> Keep all simple calc control inside it panel 2>> Keep all scientific control inside it.

when you click on button to turn on/off simple/scientific calc..

make a button click event and hide one panel and show other accordingly. and resize your windows accordingly,

 <WrapPanel Name="simple" Height="300" Width="300" >
        <StackPanel>
            <Button Content="1" Height="23" Name="button1" Width="40" />
            <Button Content="4" Height="23" Name="button4" Width="40" />
            <Button Content="7" Height="23" Name="button7" Width="40" />
        </StackPanel>
        <StackPanel>
            <Button Content="2" Height="23" Name="button2" Width="40" />
            <Button Content="5" Height="23" Name="button5" Width="40" />
            <Button Content="8" Height="23" Name="button8" Width="40" />
        </StackPanel>
    </WrapPanel>
    <WrapPanel Name="scientific" Height="300" Width="500" >
        <StackPanel>
            <Button Content="1" Height="23" Name="sbutton1" Width="40" />
            <Button Content="4" Height="23" Name="sbutton4" Width="40" />
            <Button Content="7" Height="23" Name="sbutton7" Width="40" />
        </StackPanel>
        <StackPanel>
            <Button Content="2" Height="23" Name="sbutton2" Width="40" />
            <Button Content="5" Height="23" Name="sbutton5" Width="40" />
            <Button Content="8" Height="23" Name="sbutton8" Width="40" />
        </StackPanel>
        <StackPanel>
            <some more controls...>
        </StackPanel>
    </WrapPanel>

on a button click event use:

 simple.visibility=Visibility.Hidden;
 scientific.visibility=Visibility.visible;

and vice versa

Answer 3

I think you're looking for this

<Window x:Class="Q4.MainWindow"
        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:local="clr-namespace:Q4"
        mc:Ignorable="d"
        Title="Calculator"
    WindowStyle="SingleBorderWindow"
    SizeToContent="WidthAndHeight"
    ResizeMode="NoResize" FontSize="20">
    <StackPanel Orientation="Vertical">
        <Border BorderBrush="Black" BorderThickness="1" Background="LightGray" HorizontalAlignment="Stretch" Height="60" Margin="5" >
            <TextBlock Text="0" TextAlignment="Right" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="5" FontSize="40" />
        </Border>
        <UniformGrid Columns="4">
            <UniformGrid.Resources>
                <Style TargetType="Button" >
                    <Setter Property="Margin" Value="5" />
                    <Setter Property="Width" Value="60" />
                    <Setter Property="Height" Value="60" />
                </Style>
            </UniformGrid.Resources>
            <Button Content="CE" />
            <Button Content="C" />
            <Button Content="SC" Click="Button_Click"/>
            <Button Content="÷" />
            <Button Content="7" />
            <Button Content="8" />
            <Button Content="9" />
            <Button Content="x" />
            <Button Content="4" />
            <Button Content="5" />
            <Button Content="6" />
            <Button Content="-" />
            <Button Content="1" />
            <Button Content="2" />
            <Button Content="3" />
            <Button Content="+" />
            <Button Content="±" />
            <Button Content="0" />
            <Button Content="." />
            <Button Content="=" />


            <Button Content="Sin" x:Name="sinBtn" Visibility="Collapsed"/>
            <Button Content="Cos"  x:Name="cosBtn" Visibility="Collapsed"/>
            <Button Content="Log"  x:Name="logBtn" Visibility="Collapsed"/>
            <Button Content="e"  x:Name="eBtn" Visibility="Collapsed"/>
        </UniformGrid>

    </StackPanel>
</Window>

And for code-behind

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            sinBtn.Visibility = Visibility.Visible;
            cosBtn.Visibility = Visibility.Visible;
            logBtn.Visibility = Visibility.Visible;
            eBtn.Visibility = Visibility.Visible;
        }
    }