How control re-position depends on other control visibility in same panel - wpf

I have two buttons inside a stack panel. Initially B1 button is on top, then B2. I will change button visibility dynamically from code so that, when I change B1 visibility hidden, then B2 will come on top. How can I achieve this functionality.
<Grid>
<StackPanel >
<Button Content="B1" Height="20" Width="100" Visibility="Visible"/>
<Button Content="B2" Height="20" Width="100" Visibility="Visible"/>
</StackPanel>
</Grid>

First you remove the Statckpanel and put then in a Grid and you can achieve
Try something like this.
<Grid>
<Button Content="B1" Height="20" Width="100" Visibility="Visible" Click="Button_Click" x:Name="B1" />
<Button Content="B2" Height="20" Width="100" Visibility="Visible" x:Name="B2" Click="B2_Click" />
</Grid>
private void Button_Click(object sender, RoutedEventArgs e)
{
B1.Visibility = System.Windows.Visibility.Hidden;
B2.Visibility = System.Windows.Visibility.Visible;
}
private void B2_Click(object sender, RoutedEventArgs e)
{
B2.Visibility = System.Windows.Visibility.Hidden;
B1.Visibility = System.Windows.Visibility.Visible;
}
This should give you similar behaviour. Change according to your use

Related

Change image after button click using MahApps Metro

I am using MahApps Metro anf this is my Button:
<Button
Name="startBtn"
Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}"
Click="playBtn_Click">
<Rectangle
Width="25"
Height="25">
<Rectangle.Fill>
<ImageBrush
ImageSource="pack://application:,,,/Resources/start.ico" />
</Rectangle.Fill>
</Rectangle>
</Button>
So all i want is change the Button image inside my Button Click Event:
private void startBtn_Click(object sender, RoutedEventArgs e)
{
}
XAML:
<Button
Name="startBtn"
Width="55"
Height="55"
VerticalAlignment="Top"
Style="{DynamicResource MetroCircleButtonStyle}"
Click="playBtn_Click">
<Image Width="25" Height="25" Source="pack://application:,,,/Resources/start.ico" />
</Button>
Code:
private void startBtn_Click(object sender, RoutedEventArgs e)
{
((sender as Button).Content as Image).Source = new BitmapImage(new Uri("yourpath.png"));
}

re-position control depends on other control's visibility

Actually the following answer does not solve my purpose. Hence raising another question.
How control re-position depends on other control visibility in same panel.
I have two buttons inside a stack panel. Initially B1 button is on top, then B2.
<Grid>
<StackPanel >
<Button Content="B1" Height="20" Width="100" Visibility="Visible"/>
<Button Content="B2" Height="20" Width="100" Visibility="Visible"/>
</StackPanel>
</Grid>
So, using this XAML, when I open application, I can see both B1 and B2 button in UI.
Now, pragmatically, if I do B1's visibility Hidden, then B2 will take the position of B1 button, and again if I do B1's visibility "Visible", then in the UI, B1 & B2 both will be shown. How to achieve this functionality?
You can do it using Visibility.Collapsed of the button.
<StackPanel>
<StackPanel >
<Button Content="B1" Height="20" Width="100" Visibility="Visible" x:Name="B1"/>
<Button Content="B2" Height="20" Width="100" Visibility="Visible" x:Name="B2"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Content="Collapse B1" Click="Button_Click"/>
<Button Content="Collapse B2" Click="Button_Click_1"/>
<Button Content="Visible Both" Click="Button_Click_2"/>
</StackPanel>
</StackPanel>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
B1.Visibility = Visibility.Collapsed;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
B2.Visibility = Visibility.Collapsed;
}
private void Button_Click_2(object sender, RoutedEventArgs e)
{
B1.Visibility = Visibility.Visible;
B2.Visibility = Visibility.Visible;
}
}

Animate control with respecting parents/container

I have a control that I move with help of animation from the bottom to the final position. My problem is now that I want to change the behaviour of the animation, so that it respects the outer container (DarkGray).
The orange Ractangle should only be visible on the white background and not on the darkgray Grid!
Code:
MainWindow.xaml:
<Grid Background="DarkGray">
<Grid Margin="50"
Background="White">
<Rectangle x:Name="objectToMove"
VerticalAlignment="Bottom"
Fill="Orange"
Height="50"
Width="50"/>
<Button Height="20"
Width="40"
Margin="20"
Content="Move"
Click="Button_Click"
VerticalAlignment="Top"/>
</Grid>
</Grid>
MainWindow.xaml.cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
var target = objectToMove;
var heightOfControl = target.ActualHeight;
var trans = new TranslateTransform();
target.RenderTransform = trans;
var myAnimation = new DoubleAnimation(heightOfControl, 0, TimeSpan.FromMilliseconds(600));
trans.BeginAnimation(TranslateTransform.YProperty, myAnimation);
}
Current:
Desired solution:
Use ClipToBounds Property for this.
<Grid Margin="50"
Background="White"
ClipToBounds="True">

Access control within datatemplate

This is XAML:
<Window.Resources>
<DataTemplate x:Key="Temp">
<DockPanel Width="Auto" Background="White" LastChildFill="False">
<TextBox Name="txtBox" TextWrapping="Wrap" DockPanel.Dock="Left" Text="{Binding RelativeSource={RelativeSource AncestorType=ContentControl}, Path=Content}" Height="20" Width="100"/>
<StackPanel Orientation="Vertical">
<RadioButton Content="Option1" HorizontalAlignment="Left" Height="16" Width="112" Click="RadioButton_Click" />
</StackPanel>
</DockPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<ContentControl ContentTemplate="{DynamicResource Temp}" Content="1"/>
</Grid>
This is codebehind:
private void RadioButton_Click(object sender, RoutedEventArgs e)
{
StackPanel sp = ((RadioButton)sender).Parent as StackPanel;
DockPanel dp = sp.Parent as DockPanel;
TextBox txtbox = dp.FindName("txtBox") as TextBox;
MessageBox.Show(txtbox.Text);
}
Is there a more simple way to access the textbox?
(As I know I can't get Parent of parent e.g. Parent.Parent...)
Your code is not that complex!
However, you could simplify it by using Linq-to-VisualTree:
private void RadioButton_Click(object sender, RoutedEventArgs e)
{
RadioButton rb = sender as RadioButton;
TextBox txtbox= rb.Ancestors<DockPanel>().First().Elements<TextBox>().First() as TextBox;
MessageBox.Show(txtbox.Text);
}
The Linq query above finds the first DockPanel ancestor of your RadioButton (i.e. the Parent.Parent that you wanted!), then finds the first TextBox child of the DockPanel.
However, I typically use Linq-to-VisualTree in cases where the query is more complex. I thin your approach is OK really!
Among other things you can add a reference to it in the RadioButton.Tag:
<RadioButton Content="Option1" HorizontalAlignment="Left" Height="16" Width="112"
Click="RadioButton_Click" Tag="{x:Reference txtBox}" />
private void RadioButton_Click(object sender, RoutedEventArgs e)
{
var textBox = (sender as FrameworkElement).Tag as TextBox;
//...
}

Change object's layer dynamically in WPF

I need to do something like "Move up", "Move down" with the objects on my GRID from C# code while executing, is there any possibilities?
You can try this code:
private bool _isUp = false;
private void button1_Click(object sender, RoutedEventArgs e) {
if (_isUp) {
Canvas.SetZIndex(rectangle1, 1);
} else {
Canvas.SetZIndex(rectangle1, 0);
}
_isUp = !_isUp;
}
I just use 2 rectangles in my sample, for this.
<Rectangle Height="100" HorizontalAlignment="Left" Margin="68,142,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="200" Fill="#FF9D2A2A" />
<Rectangle Height="100" HorizontalAlignment="Left" Margin="10,120,0,0" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="200" Fill="#FF265D80" />

Resources