I am trying to add icon inside small Button but it doesn't enters as desired,
here my xaml:
<Button x:Name="eye_button" BorderBrush="{x:Null}" Margin="234,0,0,0" Height="15" Width="15">
<materialDesign:PackIcon Kind="Eye" Foreground="Black" />
</Button>
Here how it's looks like:
The left squre it's the button, in the right it's the icon
Try this:
<Button x:Name="eye_button" BorderBrush="{x:Null}" Margin="234,0,0,0" HorizontalAlignment="Left">
<materialDesign:PackIcon Kind="Eye" Foreground="Black" Width="15" Height="15" />
</Button>
It should look like this at runtime:
<Button
Width="15"
Height="15"
Padding="0"
HorizontalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="Transparent"
BorderThickness="0"
Foreground="Red">
<materialDesign:PackIcon
Width="15"
Height="15"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black"
Kind="ArrowBack" />
</Button>
Make sure you put padding to 0
Related
I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.
<Canvas Width="325" Height="182">
<Image Source="/Resource/BgLoading_1.png"
Width="325"
Height="182"
Stretch="Fill"
StretchDirection="Both"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Panel.ZIndex="0"
Visibility="Visible" />
<fa:ImageAwesome Foreground="White"
Icon="Spinner"
Spin="True"
Height="48"
Width="48"
Visibility="{Binding LoadImageStatus}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Canvas.Left="139"
Canvas.Top="67" />
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
<Image x:Name="imgRightIcon"
Width="30"
Height="30"
Source="{Binding RightIconSource}"
Stretch="Fill"
Margin="285,10,10,142"
Visibility="{Binding RightIconStatus}"
Panel.ZIndex="2" />
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Canvas>
RTFM
The controls that must appear on top of the video should be placed as children of the VideoView element.
<Window ...
xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
...>
<Grid>
<vlc:VideoView x:Name="VideoView">
<Button x:Name="PlayButton"
Click="PlayButtonOnClick"
Content="Play"
Margin="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom" />
</vlc:VideoView>
</Grid>
</Window>
Avoid Canvas since they are pretty dumb.
Working example sources based on the manual.
I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.
<Grid>
<!--video control-->
<Grid Name="video">
<!--Video-->
<vlc:VideoView Grid.Row="0"
Height="182"
Width="325"
Visibility="{Binding VideoPlayerStatus}"
Panel.ZIndex="1" />
</Grid>
<Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
<Grid>
<Image x:Name="imgLeftIcon"
Width="30"
Height="30"
Source="{Binding LeftIconSource}"
Stretch="Fill"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,10,10"
Visibility="{Binding LeftIconStatus}"
Panel.ZIndex="2" />
</Grid>
</Popup>
</Grid>
I have a toolbar in my WPF window as shown in bellow, please help me change labels foreground color dynamically in code behind.
Thanks...
<DockPanel Height="60" VerticalAlignment="Top">
<ToolBar Name="MyToolBar" DockPanel.Dock="Top" Height="60" VerticalAlignment="Top" FlowDirection="RightToLeft"
FontFamily="Calibri" FontSize="16" FontWeight="Bold" Background="#FFEEF5FD" Foreground="Black" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Button Name="BtnSubmit" Style="{DynamicResource TStyle}" Click="BtnSubmit_Click" Tag="New" Height="52" Width="60"
IsDefault="True" Margin="0,0,0,1">
<StackPanel Margin="0" Height="54"
<Image Source="/Img/Save 04.png" Height="25" Margin="16,0"/>
<Label Content="Save" Margin="0,0,0,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button Name="BtnApply" Style="{DynamicResource TStyle}" Click="BtnApply_Click" Tag="New" Height="52"
IsDefault="True" Margin="0,1,0,2" Width="85">
<StackPanel Margin="0" Height="52" Width="82">
<Image Source="/Img/ApplyIcon.png" Height="25" Margin="29,0,26,0"/>
<Label Content="Edit" Margin="-15,0,-23,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</ToolBar>
</DockPanel>
To change the Foreground of all TextBlock elements you must define a Brush resource and assign it to all relevant TextBlock elements using {DynamicResource}:
MainWindow.xaml
<Window>
<Window.Resources>
<SolidColorBrush x:Key="ButtonLabelForegroundBrush" Color="Black" />
</Window.Resources>
<DockPanel>
<ToolBar>
<Button>
<TextBlock Foreground="{DynamicResource ButtonLabelForegroundBrush}" />
</Button>
</ToolBar>
</DockPanel>
</Window>
MainWindow.xaml.cs
private void ChangeTextBlockForeground()
{
var brush = FindResource("ButtonLabelForegroundBrush") as SolidColorBrush;
brush.Color = Colors.Red;
}
How to access the Buttons inside the stackpanel(Control Template)?? Means i have to make those buttons as single button object.
<Window.Resources>
<ControlTemplate TargetType="Button" x:Key="temp" x:Name="hotel">
<StackPanel x:Name="service">
<Button Content="1" Width="30" Height="30" Name="tempbtn1"/>
<Button Content="2" Width="30" Height="30" Name="tempbtn2"/>
<Button Content="3" Width="30" Height="30" Name="tempbtn3"/>
<Button Content="4" Width="30" Height="30" Name="tempbtn4"/>
</StackPanel>
</ControlTemplate>
</Window.Resources>
<Grid>
<TextBox x:Name="txttype" TextWrapping="Wrap" Text="Room Type" Width="120" Height="30" Margin="10 0 0 0"/>
<Button x:Name="button" Content="Submit" HorizontalAlignment="Left" Margin="9,0,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<StackPanel Orientation="Horizontal" x:Name="Deluxe">
<Button x:Name="btn1" Content="1" Width="60" Height="60" Template="{StaticResource temp}"/>
<Button Margin="10 0 0 0" Content="2" x:Name="btn2" Width="60" Height="60" Template="{StaticResource temp}"/>
</StackPanel>
</Grid>
I don't understand the exact requirement of you.But i hope following information will be useful to you.
General syntax to get the elements that are declared inside the control template is:
var template = controlName.Template;
var myControl = (typeofthecontrol)template.FindName("MyControlName",controlName);
In your sample,
var template = btn1.Template;
var myControl = (Button)template.FindName("tempbtn1", MyList);
In this code I added an image before the button text I'd like to have a space between the image and text but the code I have isn't working.
<Button Height="25"
Width="80"
Margin="5,10,5,10"
Command="{Binding PreviewTemplateCommand}">
<StackPanel Orientation="Horizontal" Height="15" Width="63">
<Image Source="/UILibrary;component/Themes/Default/Images/preview.PNG"
Height="15" Width="15" Margin="0,0,0,0" />
<TextBlock >Preview</TextBlock>
</StackPanel>
</Button>
Hi you have to set the left margin of the textblock. Try this:
<StackPanel Orientation="Horizontal" Height="15" Width="63">
<Image Source="..." Height="15" Width="15" Margin="0,0,0,0" />
<TextBlock Margin="25,0,0,0">Preview</TextBlock>
</StackPanel>
I have 3 regions namely Menu,Toolbar and Content. When a module(ie customer) is clicked in Menu view it will navigate to the respective view in content region, after editing the values in the textboxes I need to save that to DB. How to get the underlaying view model of the active view and send to DAL when save button is clicked in Toolbar view?.
Shell.xaml:
<Grid DockPanel.Dock="Left" Width="65" Margin="1">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Vertical" Margin="1" >
<ContentControl Name="menuControl" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.MenuRegion}"/>
</StackPanel>
</Border>
</Grid>
<Grid DockPanel.Dock="Top" Margin="1">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1" >
<StackPanel Orientation="Vertical" Margin="2">
<ContentControl Name="toolbarControl" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.ToolbarRegion}"/>
</StackPanel>
</Border>
</Grid>
<Grid DockPanel.Dock="Right" Margin="2">
<Border CornerRadius="1" BorderBrush="Black" BorderThickness="1">
<StackPanel Margin="5" >
<ContentControl Name="contentControl" DockPanel.Dock="Top" PrismRegions:RegionManager.RegionName="{x:Static infra:RegionNames.ContentRegion}"/>
</StackPanel>
</Border>
</Grid>
Menu.xaml:
<Button Grid.Row="0" Name="btnHome" Background="Transparent" Margin="1" ToolTip="Home" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:HomeView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/home_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="1" Name="btnBank" Background="Transparent" Margin="1" ToolTip="Bank" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:BankView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/bank_64.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="2" Name="btnCustomer" Background="Transparent" Margin="1" ToolTip="Customer" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:CustomerView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/customer_128.ico"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Row="3" Name="btnEmployee" Background="Transparent" Margin="1" ToolTip="Employee" Command="{x:Static inf:ApplicationCommands.NavigationCommand}" CommandParameter="{x:Type mod:EmployeeView}">
<TextBlock Height="32" Width="32" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/employee_128.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
Toolbar.xaml:
<Button Grid.Column="0" Margin="1" Name="btnAdd" Height="35" Width="35" ToolTip="Add" Background="Transparent" Command="{Binding AddCommand}" CommandParameter="Add" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/plus_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="1" Margin="1" Name="btnEdit" Height="35" Width="35" ToolTip="Edit" Background="Transparent" Command="{Binding EditCommand}" CommandParameter="Edit" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/pencil_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="2" Margin="1" Name="btnSave" Height="35" Width="35" ToolTip="Save" Background="Transparent" Command="{Binding SaveCommand}" CommandParameter="Save" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/save_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
<Button Grid.Column="3" Margin="1" Name="btnPrint" Height="35" Width="35" ToolTip="Print" Background="Transparent" Command="{Binding PrintCommand}" CommandParameter="Print" >
<TextBlock Height="30" Width="30" Text ="">
<TextBlock.Background>
<ImageBrush Stretch="Fill" ImageSource="/Modules;component/Icons/print_32.png"/>
</TextBlock.Background>
</TextBlock>
</Button>
UI Design:
Basically your view's state is entirely present in the viewmodel. In your scenario of Button being out side the viewmodel of the form to save what you can do is:
In tool bar viewmodel:
Raise an event that Save button is clicked
myEventAggregator.RaiseEvent<SaveButtonClicked>().Publish(args);
On viewmodel constructor:
subscribe for the event that you raise when you click on save button in toolbar region
myEventAggregator.GetEvent<SaveButtonClicked>().Subscribe(yourSubscriberDelegate);
On Exit of the form or cancel of form:
Unsubscribe for the event. (this makes sure you don't have multiple active forms saving the data at the same time)
myEventAggregator.GetEvent<SaveButtonClicked>().UnSubscribe(yourSubscriberDelegate);
For this you need Event aggregator knowledge of publish and subscribe. Find more details here