i put progress bar but its not look proper
<ProgressBar Height="30" Width="300" VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center" Foreground="#0A8098" BorderBrush="Transparent" Name="pbProcessing" >
<ProgressBar.Background>
<ImageBrush ImageSource="/ClientApplication;component/Images/ProgressBackground.png"/>
</ProgressBar.Background>
<ProgressBar.Clip>
<RectangleGeometry RadiusX="20.5" RadiusY="20.5" Rect="0,0,300,19"/>
</ProgressBar.Clip>
</ProgressBar>
but i shown
Any idea how to put image on progress bar perfrectly? Thanks.
Try this
<ProgressBar Value="30" Height="30" Width="300" VerticalAlignment="Center" BorderThickness="0" HorizontalAlignment="Center" Foreground="#0A8098" BorderBrush="Transparent" Name="pbProcessing" >
<ProgressBar.Template>
<ControlTemplate>
<Grid>
<Image Name="PART_Track" Source="bird1.jpg" Stretch="Fill"/>
<Rectangle Name="PART_Indicator"
Fill="BlanchedAlmond"
HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</ProgressBar.Template>
</ProgressBar>
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>
How to customize tooltip window to have a corner arrow like shown below in WPF(xaml).
I have my code like below
<Image x:Name="imgInfoTab">
<Image.ToolTip>
<ToolTip Background="WhiteSmoke" HasDropShadow="True"
Cursor="Hand">
<TextBlock Width="250" Height="250"
TextWrapping="WrapWithOverflow"
Cursor="Hand">
</TextBlock>
</ToolTip>
</Image.ToolTip>
</Image>
It looks as below with above code,
Try this:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="CornflowerBlue">
<Grid.ToolTip>
<ToolTip Placement="MousePoint" HorizontalOffset="50">
<ToolTip.Template>
<ControlTemplate TargetType="ToolTip">
<Grid>
<Path Fill="White" Data="M 0,10 L 40,10 50,0 60,10 100,10 100,60 0,60" />
<TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</ToolTip.Template>
</ToolTip>
</Grid.ToolTip>
</Grid>
If you want it auto-sizing then you'll need to do a bit more work, but that will get you started.
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
Here's my code for the button:
<Button //namespaces
x:Class="myProject.MyButton"
FocusVisualStyle="{x:Null}"
Foreground="White"
Height="60"
Width="200"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Padding="0 0 1 1"
>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
#006BB7
</Border.Background>
<DockPanel Margin="3">
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Height="30" Stretch="Fill" Margin="0 0 0 0" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="20" VerticalAlignment="Center" Padding="10,0,10,0" HorizontalAlignment="Left"/>
<Image Source="{DynamicResource ResourceKey=Bmp}" Height="30" Width="30" HorizontalAlignment="Right" Margin="0 0 10 0"></Image>
</DockPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
When I call it like this:
<ui:MyButton x:Name="btnGo" Tag="/Resources/Go.png" Content="Go" Command="{Binding Path=GoCommand}" Margin="20 0 0 0"/>
and everything looks like I want it to look: the first image isn't shown, and the third part of the button (the second image) is aligned right.
However, here:
<ui:MyButton Margin="10" Content="{Binding MyName}" Tag="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button.Resources>
<BitmapImage x:Key="Bmp" UriSource="/Images/arrowRight.png"></BitmapImage>
</Button.Resources>
</ui:MyButton>
Whn I call the button like this, the text and the second image aren't shown. All that is shown is the first image and it is stretched via the whole button's width. Why is this happening? I want to make this to behave as the other one.
Try this
In Change content of Image and of TextBlock when the Image and the TextBlock are in a button we are using resource for button and here we are using for <ui:MyButton>
<ui:MyButton Margin="10" Content="{Binding MyName}" Tag="{Binding Path}" HorizontalAlignment="Center" VerticalAlignment="Top">
<ui:MyButton.Resources>
<BitmapImage x:Key="Bmp" UriSource="/Images/arrowRight.png"></BitmapImage>
</ui:MyButton.Resources>
</ui:MyButton>
I'm having some trouble displaying a rotated progress bar. Ideally I would like to have no gap between the progress bar and textblock. Any suggestions?
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar Height="20" Width="430">
<ProgressBar.RenderTransform>
<RotateTransform Angle="-90" />
</ProgressBar.RenderTransform>
</ProgressBar>
<TextBlock Width="100" Height="500" Text="test" />
</StackPanel>
Try LayoutTransofrm instead of RenderTransform:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar Height="20" Width="430">
<ProgressBar.LayoutTransform>
<RotateTransform Angle="-90" />
</ProgressBar.LayoutTransform>
</ProgressBar>
<TextBlock Width="100" Height="500" Text="test" />
</StackPanel>